浮动菜单，如何将菜单置于顶部？

Question

I'm relatively new to js and fighting with floating menu.

This is how my js code look like

$(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");
       }
  });
});

When the top is achieved, fixed class is added properly.

My question is: What should I do inside fixed class to make the menu stick to the top?

Answer 1

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

Answer 2

Nice an simple "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>