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

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;
}