如何利用Javascript 和CSS将导航下拉至一定高度后固定在顶部

2019-08-11 02:30:00
小熊
原创
318
摘要:网页比较长的时候,如何把一些比较比较重要的东西固定在浏览器顶端,让浏览者能随时查看到?

导航栏下拉至一定高度后固定在顶部的特效,条条道路通罗马,实现的方法有好多种,这里介绍个最简单易懂的方法。通过jQuery添加移除类来实现。


首先来说,把一个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导航


发表评论
评论通过审核后显示。
文章分类
联系我们
联系人: 小熊
电话: 18037578880
Email: admin@cnsite.org
QQ: 929410000
微信: itseor
微博: itseoer
服务器推荐