![](/img/trans.png)
[英]css position: fixed gets unfixed when scrolling in chrome and safari
[英]Implementing fixed position in javascript causes jitter in Safari when scrolling
固定位置對我的用例不起作用,因為它固定在瀏覽器窗口中,你可以進入一個狀態,文本在屏幕右側,你無法達到它。 無論如何,我試圖使用絕對定位然后調整javascript中的“頂部”。 它在firefox和Chrome中運行得非常好,但在Safari中,滾動時內容會抖動。
<div class="fixed sticky" data-offset-top="50"><p>fixed</p></div>
$(document).ready(function() {
var documentHeight = $(document).height();
$(document).scroll(function() {
var scrollTop = $(window).scrollTop();
$(".sticky").offset(function() {
$this = $(this);
var offsetTop = $this.data("offset-top");
if (scrollTop < 0) {
scrollTop = 0;
}
var newTop = offsetTop + scrollTop;
if (newTop < offsetTop) {
newTop = offsetTop;
}
// Prevents document from infinitely expanding.
var maxTop = documentHeight - $this.height();
if (newTop > maxTop) {
newTop = maxTop
}
// Prevents a bit of jitter since the current offset can be
// not precisely the initial offset. 338 Vs. 338.12931923
var currentTop = $this.offset().top;
if ( Math.abs(currentTop - newTop) >= 1 ) {
return { top: newTop }
} else {
return {}
}
});
});
})
我想我明白你想要實現的目標。
如果你在元素上保持固定定位並使用javascript / jquery水平重新定位,你可以保持平滑的垂直滾動並允許它保持其水平定位:
$(function() {
var $sticky = $('.sticky');
var target = 800;
$(document).scroll(function() {
var left = $(window).scrollLeft();
var adj = target - left;
$sticky.css({left: adj});
});
});
這使用scrollLeft() ,它是scrollTop()的水平對應物
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.