將導航欄移動到頂部，同時向下滾動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; 
}

來源

2016-02-13 MuaathAli

沒有純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"); 
     } 

});

來源

2016-02-13 23:02:49 powerc9000

將導航欄移動到頂部，同時向下滾動HTML

回答

相關問題