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

Jquery - Jittery scrolling when using window scroll

本文关键字：滚动 抖动 窗口 Jquery      更新时间：2023-09-26

我在页面顶部有一个菜单，最初设置为位置：绝对。然后我有一个带有窗口滚动的脚本，一旦有人向下滚动 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>

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

-

webkit-backface-visibility：hidden; -webkit-transform： translateZ（0）;

相关文章：