косметическая проблема при приклеивании div к нижней части окна. Scroll

У меня довольно неприятная косметическая проблема с jQuery. Я использую событие $ (window) .scroll, чтобы привязать div к нижней части окна, за исключением случаев, когда он достигает нижнего колонтитула, и в этом случае он остается справа. Это в основном дает мне аналогичный эффект (как раз наоборот) к тому, который используется здесь в stackoverflow для всплывающей подсказки «Как форматировать» при задании вопроса.косметическая проблема при приклеивании div к нижней части окна. Scroll

Вопрос заключается в том, что анимация не «хорошо»:

ДИВ выглядит он «тряски», как вы прокрутите окно.
Такое поведение сильнее при прокрутке, чем при прокрутке вниз
поведение кажется хуже с Firefox, чем с другими браузерами
Это не происходит, как только мы достигли нижнего колонтитула, в этом случае Див пребывания хорошо над ним.

Здесь вы можете найти весь код, который вы можете просто скопировать/вставить, чтобы проверить.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xml:lang="fr" xmlns="http://www.w3.org/1999/xhtml" lang="en"> 
    <head> 
     <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'></script> 
     <script type="text/javascript"> 
      $(document).ready(function() { 
       function positionToolbar() { 
        var windowTop = $(window).scrollTop(); 
        var windowHeight = $(window).height(); 
        var toolbarHeight = $("#toolbar").height(); 
        var top = windowHeight + windowTop - toolbarHeight; 
        var footerTop = $("#footer").position().top; 
        if ((top + toolbarHeight) >= footerTop) { 
         $("#toolbar").css('top',footerTop - toolbarHeight); 
        } else { 
         $("#toolbar").css('top', windowHeight + windowTop - toolbarHeight); 
        } 
       } 
       positionToolbar(); 
       $(window).scroll(function() { 
        positionToolbar(); 
       }); 
      }); 
     </script> 

     <style type="text/css"> 
      body { margin: 0; padding: 0} 
      #toolbar { width: 100%; height: 50px; background-color: blue; position: absolute } 
      #whatever { height: 2000px; width: 100%; background-color: yellow} 
      #footer { width: 100%; height: 300px; background-color: red } 
     </style> 
    </head> 
    <body> 
     <div id="toolbar"></div> 
     <div id="whatever"></div> 
     <div id="footer"></div> 
    </body> 
</html>

Любая помощь будет очень признательна. Спасибо.

источник

2010-07-02 Max

Любые причины этого не могут быть чистыми CSS? Это устранит прыжки и такие, или старые браузеры, такие как IE6, заботятся? –

Можете ли вы добиться того, что мне нужно с помощью CSS? Имейте в виду, что речь идет не только о прикреплении div к нижней части окна. Существует ситуация, при которой нижний колонтитул достигнут (т. Е. Входит в окно при прокрутке вниз), и в этом случае div должен оставаться на нем. – Max

Это возможно, если «тело» должно быть минимальной высотой 100%, указав нижний колонтитул, который будет помещен абсолютно, и добавив нижнее дополнение к обертке контекста или телу, в зависимости от вашей структуры DOM. Элементы, расположенные как абсолютные, будут привязаны к их ближайшим нестационарным родителям. –

Решение состоит в том, чтобы использовать фиксированное/нижнее 0 позиционирование по умолчанию. Таким образом, положение не нужно обновлять в окне прокрутки, и косметическая проблема исчезает.

function positionToolbar() { 
    var windowTop = $(window).scrollTop(); 
    var windowHeight = $(window).height(); 
    var toolbarHeight = $("#toolbar").height(); 
    var top = windowHeight + windowTop - toolbarHeight; 
    var footerTop = $("#footer").position().top; 
    if ((top + toolbarHeight) > footerTop) { 
     $("#toolbar").css('position','absolute').css('top',footerTop - toolbarHeight); 
    } else { 
     $("#toolbar").css('position','fixed').css('top','auto').css('bottom','0'); 
    } 
}

источник

2010-07-19 09:35:39 Max

косметическая проблема при приклеивании div к нижней части окна. Scroll

ответ

Смежные вопросы