javascript - float 菜单，如何将菜单固定在顶部？

Question

我对 js 比较陌生，并且与 float 菜单作斗争。

这是我的 js 代码的样子

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

当达到顶部时，fixed 类被正确添加。

我的问题是:我应该在 fixed 类中做什么才能使菜单固定在顶部？

Answer 1

不错的简单“位置:粘性”..

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>