Sticky Navbar auf Rolle

Question

Ich verstehe, dass dies eine allgemeine Anfrage zu sein scheint, aber nach dem Durchsuchen von mehreren Posts kann ich keine Lösung finden und/oder fehlt das Wissen, um das Javascript auf meine Bedürfnisse anzupassen.

Ich bin auf der Suche nach einer Möglichkeit, meine Navbar am oberen Rand der Seite zu halten, sobald sie oben angekommen ist (weit genug nach unten scrollen). Die Probleme, die ich habe, ist, dass meine Navbar derzeit mit Flex positioniert ist, und nicht bereits oben auf der Seite.

CODEPEN

* {margin:0;padding:0;box-sizing:border-box} 
 
html, body {text-align: center;} 
 
#logo2 img { 
 
\t margin: 0 auto; 
 
    margin-top: 3%; 
 
} 
 
.menu2 { 
 
\t display: flex; /* displays children inline */ 
 
\t margin: 0; 
 
\t width: 100%; 
 
\t margin-top: 2%; 
 
\t list-style-type: none; 
 
\t background: linear-gradient(#3E3E3E, #2B2B2B); 
 
} 
 

 
li { 
 
\t flex: 1; /* each takes as much width as it can, i.e. 25% */ 
 
\t border-right: 1px solid #232323; 
 
} 
 

 
li:last-child { 
 
\t border: none; 
 
} 
 

 
li a { 
 
\t display: block; 
 
\t text-align: center; 
 
\t font: Verdana; 
 
\t font-size: 16px; 
 
\t color: #EAE0D2; 
 
\t text-decoration: none; 
 
\t padding: 20px 0; 
 
} 
 

 
li a:hover { 
 
\t background: linear-gradient(#404040, #3E3E3E); 
 
} 
 

 
.active { 
 
\t background: linear-gradient(#2B2B2B, #232323); 
 
}

<header id="logo2"> 
 
\t <a href="index.html"><img src="logo.png" alt="Logo"/></a> 
 
</header> 
 

 
<nav> 
 
<ul id="navigation" class="menu2"> 
 
    <li><a href="index.html">HOME</a></li> 
 
    <li class="active"><a href="gallery.html">GALLERY</a></li> 
 
    <li><a href="art.html">ART</a></li> 
 
    <li><a href="contact.html">CONTACT</a></li> 
 
</ul> 
 
</nav> 
 
</body>

Answer 1

Nun fand ich schließlich eine Antwort auf meine Frage. Für diejenigen von euch interessiert.

JS

var num = 240; //number of pixels before modifying styles 

$(window).bind('scroll', function() { 
    if ($(window).scrollTop() > num) { 
     $('.menu2').addClass('fixed'); 
     $('.main').addClass('main2'); 
    } else { 
     $('.menu2').removeClass('fixed'); 
     $('.main').removeClass('main2'); 
    } 
}); 

Answer 2

.menu2 { 
 
    width: 100%; height: 100%; 
 
    background-color: rgb(240, 240, 240); 
 
    position: sticky; 
 
    left: 0; top: 0; 
 
} 
 

 
.emptySpace {width: 100%; height: 1000000px;}

<span class="menu2"> 
 
    <a href="">Link 1</a> 
 
    <a href="">Link 2</a> 
 
    <a href="">Link 3</a> 
 
    <a href="">Link 4</a> 
 
    <a href="">Link 5</a> 
 
</span> 
 

 
<!-- the div below is to allow you to scroll so you can see how it works (it's absolutely useless) --> 
 
<div class="emptySpace"></div>

Wenn ich Ihre Frage richtig zu verstehen, können Sie
HTML verwenden:

<span class="menu2"> 
    <a href="">Link 1</a> 
    <a href="">Link 2</a> 
    <a href="">Link 3</a> 
</span> 

CSS:

.menu2 {position: sticky;} 

Dies bewirkt, dass die Navigationsleiste auf den oberen Rand des Bildschirms, wenn der Benutzer nach unten scrollt bleiben. Das können Sie bei W3Schools ein bisschen mehr lesen. Überprüfen Sie auch meine Weave unter LiveWeave.