粘性内容会在页面粘贴时重置页面？

Question

我有一个可过滤的内容部分，当你滚动到它时我想坚持到顶部。

+------------------+
|                  |
|      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

感谢您的帮助！

PICTORIAL EXAMPLE

因此，如果这是您加载时的当前页面 #RED部分将是可滚动的，当您滚动页面时，它将随之移动。

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

Answer 1

想出来。

我将当前的.whole-page-container放入另一个<div>。提供最外层div课程.whole-page-container，并给出第二个最外层div（.whole-page-container sticky的div position:fixed。

已移除position:static并替换为input。