Ich habe zwei Navbars. Nehmen wir an, eine Benutzer-Navigationsleiste oben und eine primäre Navigationsleiste unter der Benutzer-Navigationsleiste.macht eine navbar Sticky, wenn Benutzer scrollt
Ich möchte eine sticky primäre Navbar haben, wenn der Benutzer scrollt.
Was genau versuche ich zu tun ist, die Navbars ähnlich zu meinem Favoriten-Spiel Website-Header, hier https://playoverwatch.com/en-us/ Sehen Sie, wie die erste Navbar schön verschwindet, wenn Sie blättern und die zweite oben haftet? Ich möchte wirklich etwas ähnliches oder vielleicht genau so haben.
#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>
Danke ein Haufen Bruder, funktioniert perfekt. Aber ich habe noch eine Frage. Ich versuche, es ähnlich zu diesem https://playoverwatch.com/en-us/ Header zu machen, dass, wenn Sie die Seite nach unten scrollen, Sie sehen können, dass die zweite Navigationsleiste zu 100% erweitert wird. Ich habe versucht, das Javascript zu bearbeiten, um 'if (scroll> = 100) { $ (". IpsLayout_container") hinzuzufügen. Css (' max-width ',' 100% '); } 'es funktioniert aber nur einmal, also wenn Sie nach unten scrollen funktioniert es, aber wenn scroll zurück nach oben die zweite navbar immer noch zu 100% erweitert, da ich ein Neuling mit JavaScript und ich weiß nicht, wie man das macht. Irgendeine Idee? – Nippledisaster
Ich habe in jsfiddle aktualisiert - https://jsfiddle.net/dhananjaymane11/wvykLqxb/2/ hoffe, es wird Ihnen helfen. – DJAy
Vielen Dank für die Hilfe, funktioniert perfekt: P – Nippledisaster