有時候我們訪問別人的網站,當鼠標將頁面下拉后,導航欄并沒有消失,而是浮動于頁面的頂部。今天來看看這個特效。

“導航欄下拉至一定高度后固定在頂部的特效”,也有同學喜歡叫跟隨導航什么的。反正就是這個么意思。先直接上代碼:


<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>

將這個js放到要實現效果的頁面里面去,然后我們要修改的是第三行的.nav,“nav“改成你自己頁面導航欄的class;第七行的”100“為下拉到100個像素的時候觸發特效,可以自行修改至合適的高度。

然后在css文件里面增加這個屬性:


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


這樣就差不多完成了。

大概講下這個js的意思,判斷下拉到一定高度的時候,給導航欄的div插入一個”fixednav“屬性,然后給”fixednav“加上固定在頂部的參數。