<s id="ux55u"><sub id="ux55u"></sub></s><thead id="ux55u"><legend id="ux55u"><sup id="ux55u"></sup></legend></thead>

    1. <strike id="ux55u"><u id="ux55u"><xmp id="ux55u"><dd id="ux55u"></dd>

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

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

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

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

      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();
        }
      })  
      })
      然后CSS里添加下面樣式:


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


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

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

      聯系我們

      聯系人:ZSITE交流群

      電話/微信:

      Email:

      QQ:

      地址:青島市黃島區井岡山路157號中南金石國際廣場A座3205室

      无遮挡H肉动漫视频在线观看
        <s id="ux55u"><sub id="ux55u"></sub></s><thead id="ux55u"><legend id="ux55u"><sup id="ux55u"></sup></legend></thead>

      1. <strike id="ux55u"><u id="ux55u"><xmp id="ux55u"><dd id="ux55u"></dd>