Question

我在向下滚动时尝试让导航栏粘到顶部。当导航栏位于顶部时很容易，但由于我将Div放在它上面，我似乎无法弄明白。我尝试了固定位置，其他人没有工作。例如像这个网站www.screencult.com。顺便说一句，我使用的是Bootstarp。

这是我到目前为止所拥有的 This is what I have

<div id="nav" class="navbar navbar-default navbar-fixed">
            <div class="container">
                <div class="collapse navbar-collapse navHeaderCollapse">
                    <ul class="nav navbar-nav navbar-right">
                        <li><a href="#description" id="color" >ABOUT US</a></li>
                        <li><a id="color" href="#" >GALLERY</a></li>
                        <li><a id="color" href="#contactus" >CONTACT US</a></li>
                    </ul>
                </div>
            </div>
        </div> 

#nav {
    background-color: white;
    border: none;
    border-style: none;
}
#color {
    color: #b5be35; 
    cursor: pointer;
    transition: color 0.5s ease;
}
#color:hover {
    color: #a1a5a2;
}

Answer 1

滚动到页面上的某个点后，您需要更改为固定的位置。例如图像的高度。

我们使用滚动偶数监听器和滚动顶部来找出我们滚动了多远

window.addEventListener("scroll", function(e){
      var scrollTop = (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop;
      //If we have scrolled far enough on the page to be past the image
      //Change the nav to have fixed positioning
      var imageHeight = document.getElementById("image-header").clientHeight
      var nav = document.getElementById("nav");
      if(scrollTop > imageHeight){
          nav.classList.add("fixed-nav");
      }
      else{
          nav.classList.remove("fixed-nav");
      }

});

在HTML中向下滚动时将导航栏移动到顶部

1 个答案: