固定位置的导航栏保持在顶部，而标题消失

Question

我想制作固定位置的导航栏。在页面顶部，导航栏应位于页眉下方，向下滚动后，当页眉不再可见时，导航栏应位于页面顶部。我怎样才能做到这一点？当我在导航栏和页面顶部之间向下滚动后尝试这样做时，仍然是标题的高度（即使它不再可见）。

这是我的 CSS：

header{
  background-color: red;
  width: 100%;
  height: 100px;
}
nav{
  position: fixed;
    float:left;
  height: 100px;
  width: 100px;
    margin-left: 10px;
    margin-right: 50px;
    margin-top:50px;
    background-color: green;  
}
main{

background-color: blue;
height: 1500px;
margin-left:15%;
margin-right:5%;
margin-top:50px;

}

和 jfiddle：https://jsfiddle.net/pg2kwk5e/

Answer 1

你可以在滚动一定量后用javascript给nav元素添加一个类。

我使用了Jquery，因为它可以更快、更轻松地展示这一点。

Example

我只是在窗口滚动超过 150 像素后向 nav 添加一个类 .fixedTop，该类本身只有 top:0;margin0; 将绝对定位的元素移动到顶部并删除边距之前设置的。

代码：

var $nav = $("nav"),


$(window).scroll(function() {
  if($(this).scrollTop() > 150) {
     $nav.addClass('fixedTop');
  } else {
     $nav.removeClass('fixedTop');
  }

})

CSS：

.fixedTop {
  top: 0;
  margin: 0 !important;
}