2015-03-09 3 views
0

У меня есть меню в верхней части страницы, которая изначально установлена ​​в положение: абсолютное. Затем у меня есть скрипт с прокруткой окна, который изменяет положение на фиксированное, как только кто-то прокручивает 113 пикселей вниз по странице. Он отлично работает, за исключением того, что меню плохо работает при использовании колеса мыши (кажется, это только проблема в Chrome и Opera). Как ни странно, когда вы используете фактическую полосу прокрутки, нет проблем, это просто при использовании колесика мыши.JQuery - Jittery прокрутка при использовании прокрутки окна

Он резко перемещается вверх и вниз, как если бы он пересчитывал свое положение.

Есть ли что-нибудь, что я могу добавить в этот скрипт или css, которые уберут неудобства?

<style> 
#topnavcontainer {width:100%; height:50px; position:absolute; top:144px; z-index:200; background:#faa619} 
.topnavcontainer-scroll {position:fixed !important; top:30px !important} 
</style> 

<script type="text/javascript"> 
$(window).scroll(function() { 
    var windscroll = $(window).scrollTop(); 
    if (windscroll >= 113) { 

     $('#topnavcontainer').addClass('topnavcontainer-scroll'); 

    } else { 

     $('#topnavcontainer').removeClass('topnavcontainer-scroll'); 

    } 

}).scroll(); 
</script> 

ответ

1

Найдено решение. Применение следующего CSS к фиксированным элементам сделало трюк:

-webkit-backface-visibility: hidden; -webkit-transform: translateZ (0);

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