页面滚动条拉东到一定高度后导航栏固定在顶部的js特效

很多网站都有页面滚动条拉东到一定高度后,导航栏会固定到顶部的效果,其实这是实用js实现的。当然jqury也更容易实现。

下面分享一段简单的代码,给大家演示下如何实现这样的效果。

代码如下:

JS部分:

<script type="text/javascript">  
$(function(){  
var nav=$("#nav"); //得到导航对象  
var win=$(window); //得到窗口对象  
var sc=$(document);//得到document文档对象。  
win.scroll(function(){  
  if(sc.scrollTop()>=100){  
    nav.addClass("fixednav");   
   $(".navTmp").fadeIn();   
  }else{  
   nav.removeClass("fixednav");  
   $(".navTmp").fadeOut();  
  }  
})    
})  
</script>  

CSS3部分

.fixednav {  
    position: fixed !important; 
    top: 0px;  
    left: 0px;  
    width: 100%;  
    z-index: 1;  
}  

自己测试代码查看效果吧。

未经允许不得转载:地下室先生博客 » 页面滚动条拉东到一定高度后导航栏固定在顶部的js特效

赞 (1) 打赏作者

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏