中間のスティッキーヘッダー

スティッキーヘッダーを中部にしようとしています。ページが<ul id="scroll-list"></ul>要素の上にスクロールされると、上部に固定する必要があります。しかし、それは私が@izulitoのソリューションを以下により近くなってきた中間のスティッキーヘッダー

<div id="stop-sticky"></div> 上でページがスクロールされたときに上に固執してはなりません。私は、この更新溶液中で見てきた

しかし問題は、私は<div id="stop-sticky"></div>にスクロールした後、console.log($('#header').offset().top);によって検証元の位置、だヘッダ要素がそれに動くように見えるということです。トランジション時にヘッダdivを点滅させます。

スクロールしながらスムーズにスクロールして、ヘッダーを消して再表示する必要があります。

$(document).ready(function() { \t var actualPosition = $('#header').offset().top; \t $(window).scroll(function (event) { \t console.log($('#header').offset().top); if($(window).scrollTop() > $('#stop-sticky').offset().top) { $('#header').addClass('nonstiky'); } else { $('#header').removeClass('nonstiky');} \t }); });

#summary { \t \t width: 100%; \t \t height: 300px; \t \t background: #ccc; \t \t } \t \t #header { \t \t width: 100%; \t \t height: 60px; \t \t background: #fcc; \t \t position: sticky; \t \t top: 10px; \t \t } #header.nonstiky { position: relative } \t \t #scroll-list { \t \t height: 500px; \t \t background: #cc1; \t \t } #stop-sticky { \t \t height: 1000px; \t \t background: #c01; \t \t }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body> \t <div id="summary">Summary</div> \t <div id="header">Header</div> \t <ul id="scroll-list"></ul> <div id="stop-sticky"></div> </body>

出典

2017-12-21 Anime

このコードをチェックしてください。私はスクロールスティッキーIDをスクロールするときにあなたのヘッダーにクラスを追加しました。

$(document).ready(function() { 
 
\t var actualPosition = $('#header').offset().top; 
 
\t $(window).scroll(function (event) { 
 
    if($(window).scrollTop() > $('#stop-sticky').offset().top) { 
 
     $('#header').addClass('nonstiky'); 
 
    } else { 
 
      $('#header').removeClass('nonstiky');} 
 
\t }); 
 
});

#summary { 
 
\t \t width: 100%; 
 
\t \t height: 300px; 
 
\t \t background: #ccc; 
 
\t \t } 
 

 
\t \t #header { 
 
\t \t width: 100%; 
 
\t \t height: 60px; 
 
\t \t background: #fcc; 
 
\t \t position: sticky; 
 
\t \t top: 10px; 
 
\t \t } 
 
    
 
    #header.nonstiky { 
 
     position: relative 
 
     } 
 

 
\t \t #scroll-list { 
 
\t \t height: 500px; 
 
\t \t background: #cc1; 
 
\t \t } 
 
    #stop-sticky { 
 
\t \t height: 1000px; 
 
\t \t background: #c01; 
 
\t \t }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<body> 
 
\t <div id="summary">Summary</div> 
 
\t <div id="header">Header</div> 
 
\t <ul id="scroll-list"></ul> 
 
     <div id="stop-sticky"></div> 
 
</body>

出典

2017-12-21 16:23:11 izulito

私の更新質問をご確認ください。 – Anime

それでは、スティッキーを止めるとヘッダーが消えてしまいますか？ – izulito

中間のスティッキーヘッダー

答えて

関連する問題