我有兩個導航欄。讓我們說一個頂部的用戶導航欄和用戶導航欄下的主要導航欄。製作一個導航欄用戶滾動時粘住
我想在用戶滾動時有一個粘滯的主導航欄。
究竟即時試圖做的是使導航欄相似,我最喜歡的遊戲網站標題,這裏https://playoverwatch.com/en-us/ 見當您滾動和頂部第二個堅持是如何在第一導航欄很好消失?我真的想要有類似的東西,或者完全像這樣。
#ipsLayout_header header {
margin-bottom: 15px;
background-color: rgba(2,25,72,.3);
}
.ipsLayout_container {
max-width: 1340px;
padding: 0 15px;
}
.ipsNavBar_primary {
background: #304d66;
}
<div id="ipsLayout_header">
<header>
<div class="ipsLayout_container"><!-- my first navbar -->
<ul id="elUserNav">
<li id="cCreate">
\t \t \t \t links
</li>
</ul>
</div>
</header> \t
<nav class="ipsLayout_container"><!-- my second navbar -->
<div class="ipsNavBar_primary">
<ul class="ipsResponsive_block">
<li id="elNavSecondary_34">
links
</li> \t
</ul>
</div>
</nav>
</div>
感謝一羣兄弟,作品完美。但我還有一個問題。我試圖使它類似於這個https://playoverwatch.com/en-us/標題,當你向下滾動頁面,你可以看到第二個導航欄擴展到100%。我試圖編輯javascript以添加'if(scroll> = 100){(「。ipsLayout_container」).css('max-width','100%'); }'它的作品只有一次,所以當你向下滾動它時,但是當滾動到頂部時,第二個導航欄仍然擴展到100%,因爲我是一個JavaScript的新手,我不知道如何做這個工作。任何想法? – Nippledisaster
我已更新jsfiddle - https://jsfiddle.net/dhananjaymane11/wvykLqxb/2/希望它會幫助你。 – DJAy
非常感謝您的幫助,作品完美:P – Nippledisaster