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

【问题标题】：Jquery - Jittery scrolling when using window scrollJquery - 使用窗口滚动时抖动滚动
【发布时间】：2015-03-09 04:00:18
【问题描述】：

我在页面顶部有一个菜单，最初设置为 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>

【问题讨论】：

标签： javascript jquery css scroll

【解决方案1】：

找到了解决办法。将以下 CSS 应用于固定元素就可以了：

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

【讨论】：