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个像素后向.fixedTop添加了一个类nav，该类本身只有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;
}

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

1 个答案: