时间戳

首页 > 解决方案 > 移动 Safari 上的粘性元素问题

javascript - 移动 Safari 上的粘性元素问题

问题描述

我有一个元素，我希望在向下滚动时贴在页面顶部。多亏了 SO 上的另一个用户，所有代码在功能上都能正常工作。然而，当在手机上向下滚动时，粘性元素似乎落后了一点。我的意思是代码似乎每次父元素滚动时都会调用，它会导致对粘性元素进行数百或数千次调整，因此会导致它有点晃动。

下面是代码：

HTML

<div id="scroller-wrapper">
  <div id="scroller-anchor"></div> 
  <div id="scroller" class="row visible-xs-block meal-controls">
     My sticky element is here and working   
  </div> 
</div>

JS

    $('#scroller-wrapper').scroll(function() {
      var $anchor = $("#scroller-anchor");
      var $scroller = $('#scroller'); 
      var move = function() {
        var st = $(window).scrollTop();
        var ot = $anchor.offset().top;
        if(st > ot) { 
          $scroller.addClass('fixedElement');
        } else {
          $scroller.removeClass('fixedElement');
        }
    };
    $(window).scroll(move);
    move();
});

CSS

.fixedElement {
  position:fixed;
  top:0;
  right:0;
  width:100%;
  z-index:10000;
}

标签： javascripthtmlcss

解决方案

IMO，一个可能且更有效的解决方案是position: sticky在 CSS 而不是 JS 中使用。你也需要提供top: 0。在 IE 中有些兼容性是滞后的，但它已经是一个可行的解决方案。值得在这里看看

如果您担心旧浏览器，您可以在 JS 中添加一个回退功能，这仍然有些滞后

推荐阅读