我的网站上有一个粘性边框,在窗口滚动事件期间,我将其更新为在用户滚动时跟随窗口。
CSS:
.fixed {
position: relative;
background: black;
color: white;
height: 40px;
}
.container {
height: 2000px;
}
HTML:
<div class="container">
<div class="fixed">Fixed</div>
</div>
JS:
$(window).scroll( function() {
$('.fixed').css({top: $(window).scrollTop()});
});
演示:https://jsfiddle.net/xt8c00yq/
我知道滚动事件在移动浏览器上不可靠且无响应,因此我已经在设备上禁用了它。然而,桌面版 Safari 似乎也显得迟缓和紧张。它在 Chrome 和 Firefox 上都运行良好。在两种浏览器上测试演示以亲自查看。
是否有任何已知的技巧可以使其在 Safari 上顺利更新?
(位置:固定不是一个选项,因为它需要响应未固定的同级 css 转换而流动)
最佳答案
使用 translate3d
进入硬件加速渲染。
$(window).scroll( function() {
scrolled = $(window).scrollTop();
$('.fixed').css({
'-webkit-transform' : 'translate3d(0,' + scrolled + 'px,0)',
'-moz-transform' : 'translate3d(0,' + scrolled + 'px,0)',
'-ms-transform' : 'translate3d(0,' + scrolled + 'px,0)',
'-o-transform' : 'translate3d(0,' + scrolled + 'px,0)',
'transform' : 'translate3d(0,' + scrolled + 'px,0)'
});
});
关于javascript - OSX Safari 上滚动事件期间 CSS 定位无响应且抖动(适用于 Chrome/Firefox),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32906817/