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

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

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

②強調主要內容，方便用戶進行擴展閱讀，增加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.alolpiu.com.cn/news/1371.html