За последние 24 часа нас посетили 20576 программистов и 1106 роботов. Сейчас ищут 378 программистов ...

Плавающий DIV блок прикреплённый к низу [Решено!]

Тема в разделе "JavaScript и AJAX", создана пользователем olegkaz, 14 мар 2013.

  1. olegkaz

    olegkaz Активный пользователь

    С нами с:
    21 фев 2013
    Сообщения:
    121
    Симпатии:
    0
    Привет всем, есть маленькие трудности в создании плавающего блока прикрепленного к нижнему правому углу.

    Есть вот такой код:
    Код (Text):
    1.  
    2. <!DOCTYPE HTML>
    3. <html>
    4. <head>
    5.      <meta http-equiv="content-type" content="text/html" />
    6.     <title>Страница</title>
    7.      
    8.  
    9. <style type="text/css">
    10. html,body{
    11.       margin:0;
    12.       padding:0;
    13.       height: 100%;
    14. }
    15.  
    16. #main{
    17.      min-height: 100%;
    18.      position: relative;
    19. }
    20.  
    21. #floatingBlock{
    22.     position: absolute;
    23.     right: 20px;
    24.     bottom: 20px;
    25.     width: 100px;
    26.     height: 50px;
    27. }
    28. </style>
    29. </head>
    30. <body>
    31. <div id="main">
    32.        <div id="floatingBlock">Плавающий блок</div>
    33. </div>
    34. </body>
    35. </html>
    РЕШЕНИЕ :
    Код (Text):
    1.  
    2. #floatingBlock{
    3.     position: fixed;
    4.     right: 10px;
    5.     bottom: 10px;
    6. }
     
  2. Your

    Your Старожил

    С нами с:
    2 июл 2011
    Сообщения:
    4.074
    Симпатии:
    7
  3. olegkaz

    olegkaz Активный пользователь

    С нами с:
    21 фев 2013
    Сообщения:
    121
    Симпатии:
    0
    Re: Плавающий DIV блок прикреплённый к низу.

    Нашел решение. Только причём тут был Drag-and-drop?
    Все идёт от функции scrollTop().
     
  4. Your

    Your Старожил

    С нами с:
    2 июл 2011
    Сообщения:
    4.074
    Симпатии:
    7
    А, вы про что имеете ввиду?
    За страницей, чтобы двигался по событию колесика, то есть скролл-бара?
    У вас вопрос не корректный...
    Выражайтесь в следующий раз яснее...

    Можно воспользоваться position:fixed;
     
  5. olegkaz

    olegkaz Активный пользователь

    С нами с:
    21 фев 2013
    Сообщения:
    121
    Симпатии:
    0
    Вот именно просто надо было добавить всего position:fixed; Почему топотянуло в сторону jquery , хотя решалось всё с помощью CSS.
     
  6. Your

    Your Старожил

    С нами с:
    2 июл 2011
    Сообщения:
    4.074
    Симпатии:
    7
    Если делать под все браузеры, и старые тоже... То придется хакнуть, так как в некоторых не поддерживается это свойство.
    И придется применять expression.