Floating-Menü, wie Menü an der Spitze zu halten?

Question

Ich bin relativ neu in js und kämpfe mit schwebenden Menü.

Dies ist, wie mein js Code aussehen

$(function(){ 
console.log('jest'); 
$(window).scroll(function(event){ 
    console.log($('#menu').offset().top, $(this).scrollTop()); 
    if ($('#menu').offset().top <= $(this).scrollTop()+$(window).height()) { 
       $('#menu').addClass("fixed"); 
     } else { 
      $('#menu').removeClass("fixed"); 
     } 
    }); 
}); 

Wenn die obere erreicht ist, wird fixed Klasse richtig hinzugefügt.

Meine Frage ist: Was soll ich in fixed Klasse tun, um das Menü an der Spitze zu bleiben?

Answer 1

Nizza eine einfache "position: sticky" ..

brand { 
 
    display: block; 
 
    background-color: pink; 
 
    padding: 10px; 
 
    font-size: 20pt; 
 
} 
 

 
header { 
 
    background-color: yellow; 
 
    border: 2px solid black; 
 
    padding: 10px; 
 
    position: sticky; 
 
    top: 0; 
 
} 
 

 
section { 
 
    background-color: silver; 
 
    padding: 10px; 
 
} 
 

 
body { 
 
padding: 0; 
 
margin: 0; 
 
}

<brand> 
 
<div>This is our branding,. It can scroll away.</div> 
 
<small>for all your header needs,.. </small> 
 
</brand> 
 

 
<header> 
 
This is the header 
 
</header> 
 
<section> 
 
Our othe stuff can go in here.<br><br><br><br><br><br><br><br><br><br> 
 
Scroll down<br><br><br><br><br><br> 
 
Even further<br><br><br><br><br> 
 
A little bit more<br><br><br><br><br> 
 
Ok I'm bored now. 
 
</section> 
 

 
<header> 
 
This is repeated, see how the header takes over 
 
</header> 
 
<section> 
 
Our othe stuff can go in here.<br><br><br><br><br><br><br><br><br><br> 
 
Scroll down<br><br><br><br><br><br> 
 
Even further<br><br><br><br><br> 
 
A little bit more<br><br><br><br><br> 
 
Ok I'm bored now. 
 
</section>

Answer 2

.fixed{ 
    position: fixed; 
    top: 0; 
    right: 0; 
    left: 0; 
}