Javascript 使用粘性div平滑滚动

我想创建一个像本例中一样平滑的粘性div：

现在，我的例子一点也不顺利，但真的很紧张。我有这个JS代码：

$(window).scroll(function () {

        var scroll_top = $(this).scrollTop();
           if (scroll_top > 66) {//height of header
             $('.wrapper').addClass('sticky');
          } else {
          $('.wrapper').removeClass('sticky');
          }
   });

以及HTML：

<div class="wrapper">
     <h4>Ausgaben in Millionen Franken</h4>
     <div class="background">
          <div id="kunstmuseum"></div><div id="historisch"></div><div id="naturhist"></div><div id="kulturen"></div><div id="antik"></div><div id="beyeler"></div><div id="weitereMuseen"></div><div id="theaterBasel"></div><div id="kaserne"></div><div id="weitereTheater"></div><div id="sinfonie"></div><div id="jazz"></div><div id="rock"></div><div id="literatur"></div><div id="erbe"></div><div id="wettbewerb"></div><div id="weiteres"></div><div id="zoo"></div>
    </div>
    <div id="eins">0</div>
    <div id="zwei">30</div>
    <div id="drei">60</div>
    <div id="vier">90</div>
    <div id="fuenf">120</div>
    <div id="eingespart"><h4>Total eingespart:&ensp;<div id="totalSum">0&ensp;CHF</div></h4></div>
</div>

---

这是jsfiddle:

看起来您将sticky类附加到了错误的元素。请尝试以下方法：

$(window).scroll(function () {
    var scroll_top = $(document).scrollTop();
    if (scroll_top > 66) {//height of header
        $('.background').addClass('sticky');
     } else {
        $('.background').removeClass('sticky');
     }
});

---

另外，对于教育，你可以看看。

这不是我真正想做的，但你的功能运行良好

解决问题的最简单方法是添加填充顶部：66px；66是在添加类“sticky”时主体元素的页眉高度

---

让我知道这是否适合您。

当我使用滚轮时，示例并不流畅。他们似乎用Javascript更新了divs的排名，而不是给它一个绝对的位置。你的方法的开始比示例要好：可能想看看引导粘贴：谢谢，但我需要所有的内容，所以内容和背景标签下面的div。所以我认为包装是正确的想法。不幸的是，我不完全理解示例代码，但感谢您的发布。我添加了这样一行：$window.scroll函数{var scroll\u top=$this.scrollTop；if scroll\u top>66{//header$'.wrapper.addClass'sticky'；document.body.style.paddingTop==66px；}其他{$'.wrapper.removeClass'sticky'；}；但是当我使用滚动条慢慢向下移动滚动条时，仍然会有恼人的闪烁。如果你提供一个新的稍微好一点的示例，我会为你修复它。JS fiddle示例对我来说不是很清楚。HTML标记对我来说似乎不正确。而且我不确定哪个元素应该是粘性的。好的，很抱歉。我是c向上学习示例并更新链接。应该粘贴的是带有类包装器的div