导航栏下拉至一定高度后固定在顶部的特效

Posted 闯进华府的9527

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了导航栏下拉至一定高度后固定在顶部的特效相关的知识,希望对你有一定的参考价值。

<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>
.fixednav {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    z-index: 1;
}

 

以上是关于导航栏下拉至一定高度后固定在顶部的特效的主要内容,如果未能解决你的问题,请参考以下文章

BootStrap有用代码片段(持续总结)

小程序自定义导航栏仿原生固定在顶部

鼠标下滑到一定的高度时二级导航条固定在顶部

css 如何增加Bootstrap中导航栏的高度? Twitter bootstrap navbar固定顶部重叠网站?

小程序固定导航栏在顶部,跟随下滑

我用css定位了导航,怎么当网页下拉到一定高度的时候变成悬浮的?