蟬知系統如何設置導航條固定在頂部

對于頁面比較長的網站，我們在下拉滾動條時，如果要跳轉其他頁面板塊，又得回到網站頂部找導航條，操作不便。為了提高用戶體驗度，我們經常采取的解決方案就是將導航條不定在頂部，方便用戶快捷瀏覽網站各個板塊。

那 蟬知系統是如何將導航條固定在網站頂部的呢，這里我提供了兩種解決方案：

1.使用“class=" navbar-fixed-top"”樣式。

蟬知系統采用基于Bootstrap開發的ZUI前端框架，繼而我們可以直接對導航條元素添加 navbar-fixed-top樣式，從而達到導航條固定在頂部的效果。

2.使用CSS/JS實現。

//設置導航條固定在頂部
$(function(){
var nav=$("#navbar"); //得到導航對象，設立改成你自己的網站導航標簽，蟬知為#navbar
var win=$(window); 
var sc=$(document);
win.scroll(function(){
  if(sc.scrollTop()>=200){ //這里的200指導航上移指定距離后固定在頂部
    nav.addClass("fixednav"); 
   $(".navTmp").fadeIn(); 
  }else{
   nav.removeClass("fixednav");
   $(".navTmp").fadeOut();
  }
})  
})

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

寬度根據實際情況自行設定。

如果大家還有其他實現方法，歡迎一起分享討論。