代理加盟 2019全新代理計劃 賺錢+省錢雙管齊下,獨立平臺,豐厚利潤!

您現在的位置: 秀站網 > 站長學院 > 建站教程 >

網頁頭部導航,側欄下拉時固定

來源:未知 發布時間:2019-03-30熱度:我要評論
網頁設計中,特別是自適應布局,如果頁面過長,用戶下拉或滾動鼠標時,頭部導航就看不到了。可以設計網頁導航固定在頁面頂部,讓用戶方便點擊;設置頁面側欄固定的原因主要有: ①主欄內容很長,側欄較短,用戶滾動瀏覽時,側欄就空白了,考慮布局時就需要固定側欄全部...

       網頁設計中,特別是自適應布局,如果頁面過長,用戶下拉或滾動鼠標時,頭部導航就看不到了。可以設計網頁導航固定在頁面頂部,讓用戶方便點擊;設置頁面側欄固定的原因主要有:

①主欄內容很長,側欄較短,用戶滾動瀏覽時,側欄就空白了,考慮布局時就需要固定側欄全部或部分內容。

②強調主要內容,方便用戶進行擴展閱讀,增加PV。主要內容一般指主要分類、TAG標簽、推薦文章(產品)、詢盤下訂單等。

網頁設計頂部下拉固定

一直固定在頁面頂部

CSS樣式主要部分

<style>
 .header{position:fixed;top:0;z-index:999}
</style>

導航HTML部分

 <p class="header"> 
  <ul>
   <li><a href="/seo/">SEO基礎</a></li>
   <li><a href="/seojj/">SEO進階</a></li>
  </ul>
 </p>

下拉或滾動才固定

       把下面代碼放在</head>之前,在不產生沖突的情況下,放在頁面代碼的最下面也沒什么問題,就是加載快慢的區別而已。

<script type="text/javascript" src="jquery1.42.min.js"></script><!--引入jquery,可自行下載-->
<script type="text/javascript">
//導航固定
 var nt = !1;$(window).bind("scroll",function() {var st = $(document).scrollTop();nt = nt ? nt: $("#header").offset().top;var sel=$("#header");
 if(nt < st) {
  sel.addClass("fixed");
 }else{
  sel.removeClass("fixed");}
 }); 
 //側欄固定
 var nt_a = !1;$(window).bind("scroll",function() {var st_a = $(document).scrollTop();nt_a = nt_a ? nt_a: $(".tags_list").offset().top;var sel_a=$(".tags_list");
 if (nt_a < st_a){
  sel_a.addClass("fixed_a");
 }else{
  sel_a.removeClass("fixed_a");}
 });
</script>

       說明:需要固定的p可以用id或者class進行選擇,如紅色部分,向上、下滾動會在相應的p增加或去掉class="fixed",如橙色部分。注意變量名要一一對應,請自行修改即可。

CSS樣式主要部分

.fixed{position:fixed;top:0;z-inden:999}
.fixed_a{position:fixed;top:0;z-inden:999}

HTML部分

<p class="header" id="header">
  <ul>
   <li><a href="/seo">SEO基礎</a></li>
   <li><a href="/seojj">SEO進階</a></li>
  </ul>
</p>
<p class="tag_list">
 <p>側欄部分內容</p>
</p>

       最終效果參考本站首頁,根據實際情況p選擇用id還是class,如果是class,那這一類的都會被固定,而id是唯一一個。

本文地址:http://www.xejrrv.tw/news/1371.html

    責任編輯:秀站網

    發表評論

    評論列表(條)

      深圳风采手机投注