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

Implementing fixed position in javascript causes jitter in Safari when scrolling

本文关键字：Safari 滚动 抖动 位置 javascript 实现 定位      更新时间：2023-09-26

固定位置不适合我的用例，因为它固定到浏览器窗口，您可以进入文本离开屏幕到右侧的状态，您无法到达它。无论如何，我尝试使用绝对定位，然后在javascript中调整"顶部"。它在firefox和Chrome中工作得很好，但在Safari中，当你滚动时，内容会抖动。

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

<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()的水平对应

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

相关文章：