我在页面顶部有一个菜单,该菜单最初设置为 position:absolute。然后我有一个带有窗口滚动的脚本,一旦有人向下滚动页面 113 像素,它就会将位置更改为固定。它工作正常,除了使用鼠标滚轮时菜单抖动非常糟糕(似乎只是 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);
关于javascript - Jquery - 使用窗口滚动时抖动滚动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28935047/