スティッキーコンテンツはスティックされるべきときにページをリセットしますか？ - javascript、jquery、html、css

フィルター可能なコンテンツセクションがあり、スクロールすると上部に表示されます。

+------------------+
|                  |
|      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 この2つは同義語であり、呼び出し方が異なります。 #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();
});
});

また、実際の例へのリンクもあります。 例

助けてくれてありがとう！

写真の例

ロードするときにこれが現在のページである場合 ザ #RED セクションはスクロール可能です。ページをスクロールすると、セクションも一緒に移動します。

このポイントに到達すると、 #BLUE セクションが一番上にあります。この青いセクションを一番上に修正して、コンテンツをスクロールできるようにします。

回答：

理解した。

私は私の現在を包みました .whole-page-container 別の <div>。最も外側を与えた div クラス .whole-page-container そして2番目に外側を与えた div （本当に .whole-page-container のdiv sticky.

削除済み position:fixed に置き換えられます position:static.