Исправлена ​​плавная прокрутка плавающих элементов в Firefox и Chrome.

Question

У меня есть скрипт, который использует jQuery и CSS для позиционирования чего-либо в верхней части страницы при прокрутке.Тем не менее, при прокрутке панель выглядит как дрожащая, и она зафиксирована в верхней части браузера в Google Chrome и Mozilla Firefox.Почему это может быть?

Надеюсь, вы понимаете, что я пытаюсь описать.Если нет, скопируйте и вставьте этот код вместе с библиотекой jQuery, чтобы понять, что я имею в виду:

<style type='text/css'>
body {
    height:1000px;
    margin:0;
    padding:0;
}

#scroller {
    position:relative;
    top:60px;
    width:100%;
    background:#CCC;
    height:20px;
}
</style>

<script type='text/javascript'>
    $(window).load(function() {
        $(window).scroll(function() {
            if($(window).scrollTop()>60) {
              $('#scroller').css('top', $(window).scrollTop());
            }
        });
    });
</script>

<div id="scroller">Some controls</div>

Answer 1

Используйте это:

$(window).load(function(){
    $(window).scroll(function(){
        if($(window).scrollTop()>60){
            $('#scroller').css('position', 'fixed');
            $('#scroller').css('top', 0);
        } else {
            $('#scroller').css('position', 'relative');
            $('#scroller').css('top', 60);
        }
    });
});

http://jsfiddle.net/nwellcome/6PGZE/1/

Вместо того, чтобы постоянно манипулировать верхом, как только он должен оставаться на вершине, установите "положение" в "фиксированное" исверху до 0, поэтому не нужно ждать события прокрутки javascript, чтобы исправить положение.

Answer 2

Существует также плагин jquery, который позаботится об этом.Вот демонстрация заголовка, который выталкивает баннер из поля зрения, а затем останавливается в верхней части страницы.Для вашего примера представьте, что баннера там нет.

Демо: http://jsfiddle.net/ZczEt/

Редактировать: Обновленная скрипка: http://jsfiddle.net/ZczEt/2180/

Использование:

$(document).ready(function() {
    $('.header').scrollToFixed();
});

Описание плагина выглядит следующим образом:

Этот плагин используется для фиксации элементов в верхней части страницы, если бы элемент прокручивался вне поля зрения по вертикали;однако, он позволяет элементу продолжать двигаться влево или вправо с горизонтальной прокруткой.

При наличии опции marginTop, элемент перестанет двигаться вертикально вверх, как только вертикальная прокрутка достигнет целевого положения;но элемент все равно будет перемещаться по горизонтали при прокрутке страницы влево или вправо.После того, как страница будет прокручена назад до целевой позиции, элемент будет восстановлен в исходное положение на странице.

Этот плагин был протестирован в Firefox 3/4, Google Chrome 10/11, Safari.5 и Internet Explorer 8/9.

Плагин и источник: https://github.com/bigspotteddog/ScrollToFixed