![](/img/trans.png)
[英]Absolute positioning with an onclick event works in chrome but not firefox
[英]CSS positioning during scroll event unresponsive and jittery on OSX Safari (works in Chrome/Firefox)
我的网站上有一个粘性边框,在窗口的滚动事件期间,我将其更新为在用户滚动时跟随窗口。
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上顺利更新?
(position:fixed不是一个选项,因为它需要流动以响应未固定的同级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)'
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.