删除窗口（滚动）jQuery上的故障/闪烁

Question

当到达某个元素时，此函数将添加所需的类，但之后元素似乎会不断抖动。在scroll上应用类的这种方式是否有问题？这是一个演示（如果需要，请缩小窗口大小，以便您可以滚动浏览内容）：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");
    }
  });
});

Answer 1

将表格行更改为“固定”会影响测量，并且会在两种状态之间不断切换。我会复制行并在需要时显示它。

<p><div>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eligendi explicabo dolore odit facilis debitis ducimus repudiandae vero? Dolore ab id suscipit repudiandae quidem, atque recusandae! Impedit blanditiis tempora illum optio?</div></p>
<p><div>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eligendi explicabo dolore odit facilis debitis ducimus repudiandae vero? Dolore ab id suscipit repudiandae quidem, atque recusandae! Impedit blanditiis tempora illum optio?</div></p>
<p><div>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eligendi explicabo dolore odit facilis debitis ducimus repudiandae vero? Dolore ab id suscipit repudiandae quidem, atque recusandae! Impedit blanditiis tempora illum optio?</div></p>
<p><div>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eligendi explicabo dolore odit facilis debitis ducimus repudiandae vero? Dolore ab id suscipit repudiandae quidem, atque recusandae! Impedit blanditiis tempora illum optio?</div></p>
<p><div>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eligendi explicabo dolore odit facilis debitis ducimus repudiandae vero? Dolore ab id suscipit repudiandae quidem, atque recusandae! Impedit blanditiis tempora illum optio?</div></p>
<table>
    <tbody>
        <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="is-fixed" style="display:none;">
            <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>

    </tbody>
</table>

<p><div>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eligendi explicabo dolore odit facilis debitis ducimus repudiandae vero? Dolore ab id suscipit repudiandae quidem, atque recusandae! Impedit blanditiis tempora illum optio?</div></p>
<p><div>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eligendi explicabo dolore odit facilis debitis ducimus repudiandae vero? Dolore ab id suscipit repudiandae quidem, atque recusandae! Impedit blanditiis tempora illum optio?</div></p>
<p><div>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eligendi explicabo dolore odit facilis debitis ducimus repudiandae vero? Dolore ab id suscipit repudiandae quidem, atque recusandae! Impedit blanditiis tempora illum optio?</div></p>
<p><div>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eligendi explicabo dolore odit facilis debitis ducimus repudiandae vero? Dolore ab id suscipit repudiandae quidem, atque recusandae! Impedit blanditiis tempora illum optio?</div></p>
<p><div>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eligendi explicabo dolore odit facilis debitis ducimus repudiandae vero? Dolore ab id suscipit repudiandae quidem, atque recusandae! Impedit blanditiis tempora illum optio?</div></p>
<p><div>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eligendi explicabo dolore odit facilis debitis ducimus repudiandae vero? Dolore ab id suscipit repudiandae quidem, atque recusandae! Impedit blanditiis tempora illum optio?</div></p>
<p><div>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eligendi explicabo dolore odit facilis debitis ducimus repudiandae vero? Dolore ab id suscipit repudiandae quidem, atque recusandae! Impedit blanditiis tempora illum optio?</div></p>
<p><div>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eligendi explicabo dolore odit facilis debitis ducimus repudiandae vero? Dolore ab id suscipit repudiandae quidem, atque recusandae! Impedit blanditiis tempora illum optio?</div></p>

css

.is-fixed {
  position: fixed;
  top: 0;
  background-color: yellow;
  display:table-row;
}

Javascript

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

        if(scroll > os + ht){
            $('.is-fixed').show()
        } else {
            $('.is-fixed').hide();
        }
    });
});

Answer 2

你可以用css来做，用位置：粘；

.is-fixed {
  position: sticky;
  position: -webkit-sticky;
  top: 0;
  background-color: yellow;
}

并将该类应用于表

<table class='is-fixed'>

工作示例：代码笔

当前代码的问题是：

因为您的固定类可能会删除内容并更改高度

正如@epascarello在评论中告诉你的

Answer 3

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

我还添加了一个“幽灵元素”，所以在你固定了标题元素后，你的内容高度不会改变。如果固定元素从其位置脱离，重影元素将占据空间。

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

超文本标记语言：

<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');
    }
  });
});