Jquery - 使用窗口滚动时抖动滚动

时间:2015-03-09 04:00:18

标签: javascript jquery css scroll

我在页面顶部有一个菜单,最初设置为position:absolute。然后我有一个带窗口滚动的脚本,一旦有人向下滚动页面113px,就会将位置更改为固定。它工作正常,但使用鼠标滚轮时菜单抖动非常糟糕(似乎只是Chrome和Opera中的一个问题)。使用实际滚动条时奇怪的是,没问题,只是在使用鼠标滚轮时。

它突然上下移动,好像它正在重新计算它的位置。

有什么我可以添加到这个脚本或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 个答案:

答案 0 :(得分:1)

找到解决方案。将以下CSS应用于固定元素可以解决问题:

-webkit-背面能见度:隐藏; -webkit-transform:translateZ(0);