javascript - 粘滞内容应该粘贴时会重置页面吗？

我有一个可过滤的内容部分，当您滚动到该部分时，我想保留在顶部。

+------------------+
|                  |
|      HEADER      |
+------------------+ <--- WHEN THIS IS COVERED BY TOP OF BROWSER WINDOW (SCROLLED UP)
|                  | <--- THIS BECOMES FIXED TO TOP AND SCROLLABLE
|                  |
|      STICKY      |
|      CONTENT     |
+------------------+

截至目前，页眉部分几乎已从滚动条中隐藏，然后将闪烁并将滚动条重置为顶部。不太确定该怎么做。

对于HTML，您唯一需要担心的<div>是#sticky和.whole-page-container这两个是同义词，只是以不同的方式调用。在#sticky功能中使用jQuery，在.whole-page-container中使用CSS。

CSS：

.whole-page-container{
    display: block;
    position: relative;
    height: auto;
    width: 100%;
    top: 0;
}
----------------------------

USED TO FIX THE CONTENT TO THE TOP (STICKY IT)
    .stuck {
      position: fixed;
      top: 0;
    }

JS

$(document).ready(function() {
var stickyNavTop = $('#sticky').offset().top;

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

if (scrollTop > stickyNavTop) {
    $('#sticky').addClass('stuck');
} else {
    $('#sticky').removeClass('stuck');
}
};

stickyNav();

$(window).scroll(function() {
    stickyNav();
});
});

这也是工作示例的链接：EXAMPLE

谢谢您的帮助！

例子

因此，如果这是您加载时的当前页面

#RED部分将是可滚动的，当您滚动页面时，该页面将随之移动。

一旦到达这一点，#BLUE部分位于顶部，我希望此蓝色部分固定至顶部，以便您可以滚动浏览内容。

最佳答案

弄清楚了。

我将当前的.whole-page-container包裹在另一个<div>中。给最外面的div类.whole-page-container并赋予第二个最外面的div（以前.whole-page-container的div是sticky）。

删除了position:fixed并替换为position:static。

关于javascript - 粘滞内容应该粘贴时会重置页面吗？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/32571392/