如何利用Javascript 和CSS將導航下拉至一定高度後固定在頂部

首先來説，把一箇DIV固定在瀏覽器頂端，需要用到的CSS。

.navbar-fixed-top{
    position: fixed;  
    top: 0px;
    left: auto;  //視具體情況來設置左右位置  
    z-index: 999; 
}

註意：position:fixed 會使元素脫離文檔，不佔據文檔空間。

對應的JS代碼：

<script type="text/javascript">  
   $(function(){  
   var nav=$(".nav"); //導航對象,註意與您的保持一緻。  
   var win=$(window); //窗口對象  
   var sc=$(document);//document文檔對象。  
   win.scroll(function(){  
     if(sc.scrollTop()>=500){  // 滾動高度視情況而定。 
      nav.addClass("navbar-fixed-top");   
     }else{  
      nav.removeClass("navbar-fixed-top");  
     }  
   })    
  })  
</script> 

1.將CSS 和JS 代碼 放到你要使用的頁麵裡麵。

2.修改導航的類名，與你頁麵導航類名保持一緻。我這裡使用的是  nav。

3.具體滾動的高度，視具體情況而定，我這裡是500 像素。

例子：

1 .河南德翡客貿易有限公司産品詳情頁，點擊查看。

2 .河南蘭帆貿易有限公司産品詳情頁，點擊查看。

蔘考 文檔：

1. bootstrap導航。