Question

此函数在到达某个元素时添加了所需的类，但在此之后元素似乎不断摇晃。这种在滚动上应用类的方法有什么问题吗？这是一个演示（请根据需要缩小窗口大小，以便滚动浏览内容）：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

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

我还添加了一个“ghost元素”，因此在修复header元素后，你的内容高度不会改变。如果固定元素从其位置分离，则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');
    }
  });
});

Answer 2

您只需使用position: sticky;

的css即可

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

并将此类应用于表

<table class='is-fixed'>

工作示例：Codepen

当前代码的问题是：

因为你的固定类可能会删除内容和高度   变化

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

Answer 3

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

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

删除窗口上的毛刺/闪烁（滚动）jQuery

3 个答案: