在javascript中实现固定位置会在滚动时导致Safari中的抖动

固定位置对我的用例不起作用，因为它固定在浏览器窗口中，你可以进入一个状态，文本在屏幕右侧，你无法进入它。 无论如何，我试图使用绝对定位然后调整javascript中的“顶部”。 它在firefox和Chrome中运行得非常好，但在Safari中，滚动时内容会抖动。

http://jsfiddle.net/Z8UFE/4/

fixed
 $(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  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 {} } }); }); }) 

Answer 1

我想我明白你想要实现的目标。

如果你在元素上保持固定定位并使用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（）的水平对应物

http://jsfiddle.net/Z8UFE/18/