将导航栏移动到顶部，同时向下滚动HTML

问题描述：

我正试图使滚动条向上移动导航栏。当导航栏位于顶部时很容易，但由于我在上面放置了一个Div，我似乎无法弄清楚。我尝试了位置固定和其他人没有工作。例如就像这个网站www.screencult.com。顺便说一句，我正在使用Bootstarp。将导航栏移动到顶部，同时向下滚动HTML

这里是我到目前为止 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; 
}

没有纯CSS的方式来做到这一点。当您向下滚动页面时，必须将栏的样式更改为固定。 – iulia

答

你需要改变你已经滚动到页面上的某一点后，固定的位置。例如图像的高度。

我们使用滚动甚至监听器和滚动顶部找出有多远，我们已滚动

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

相关推荐