如何利用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导航。