javascript - 消除窗口上的毛刺/闪烁(滚动)jQuery

当到达某个元素时，此函数将添加所需的类，但是此后元素似乎会不断地晃动。这种在滚动上应用类的方式有问题吗？这是一个演示（如果需要，请减小窗口大小，以便您可以滚动浏览内容）：https://codepen.io/anon/pen/ooZZja

$(function() {
  $(window).scroll(function() {
    var scroll = $(window).scrollTop();
    var os = $(".header").offset().top;
    var ht = $(".header").height();
    if (scroll > os + ht) {
      $(".header").addClass("is-fixed");
    } else {
      $(".header").removeClass("is-fixed");
    }
  });
});

最佳答案

您正在计算滚动时标题的偏移量。因为您将位置设置为固定，所以它会更改，并且计算不再有效。在将滚动事件附加到窗口对象之前，需要保存标题元素的初始位置。

我还添加了一个“ ghost元素”，因此在固定标头元素之后，您的内容高度不会改变。如果固定元素脱离其位置，则鬼元素将占据空间。

分叉的笔：https://codepen.io/anon/pen/GOWWwo

HTML：

<tr class="header">
  <th>1</th>
  <th id="day-in-week-0">Mon</th>
  <th id="day-in-week-1">Tue</th>
  <th id="day-in-week-2">Wed</th>
  <th id="day-in-week-3">Thu</th>
  <th id="day-in-week-4">Fri</th>
  <th id="day-in-week-5">Sat</th>
  <th id="day-in-week-6">Sun</th>
</tr>
<tr class="ghost"></tr>

CSS：

.header:not(.is-fixed) + .ghost {
  display: none;
}

JavaScript：

$(function(){
  var os = $(".header").offset().top;
  var ht = $(".header").height();

  $('.header + .ghost').css({
    height: ht + 'px'
  });

  $(window).scroll(function() {
    var scroll = $(window).scrollTop();

    if (scroll > os + ht){
      $('.header').addClass('is-fixed');
    } else {
      $('.header').removeClass('is-fixed');
    }
  });
});

关于javascript - 消除窗口上的毛刺/闪烁(滚动)jQuery，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/47224348/