網(wǎng)頁設(shè)計(jì)中，特別是自適應(yīng)布局，如果頁面過長(zhǎng)，用戶下拉或滾動(dòng)鼠標(biāo)時(shí)，頭部導(dǎo)航就看不到了。可以設(shè)計(jì)網(wǎng)頁導(dǎo)航固定在頁面頂部，讓用戶方便點(diǎn)擊；設(shè)置頁面?zhèn)葯诠潭ǖ脑�因主要有�?/p>

①主欄內(nèi)容很長(zhǎng)，側(cè)欄較短，用戶滾動(dòng)瀏覽時(shí)，側(cè)欄就空白了，考慮布局時(shí)就需要固定側(cè)欄全部或部分內(nèi)容。

②強(qiáng)調(diào)主要內(nèi)容，方便用戶進(jìn)行擴(kuò)展閱讀，增加PV。主要內(nèi)容一般指主要分類、TAG標(biāo)簽、推薦文章(產(chǎn)品)、詢盤下訂單等。

一直固定在頁面頂部

CSS樣式主要部分

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

導(dǎo)航HTML部分

 <p class="header"> 
  <ul>
   <li><a href="/seo/">SEO基礎(chǔ)</a></li>
   <li><a href="/seojj/">SEO進(jìn)階</a></li>
  </ul>
 </p>

下拉或滾動(dòng)才固定

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

<script type="text/javascript" src="jquery1.42.min.js"></script><!--引入jquery，可自行下載-->
<script type="text/javascript">
//導(dǎo)航固定
 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");}
 }); 
 //側(cè)欄固定
 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進(jìn)行選擇，如紅色部分，向上、下滾動(dòng)會(huì)在相應(yīng)的p增加或去掉class="fixed"，如橙色部分。注意變量名要一一對(duì)應(yīng)，請(qǐng)自行修改即可。

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基礎(chǔ)</a></li>
   <li><a href="/seojj">SEO進(jìn)階</a></li>
  </ul>
</p>
<p class="tag_list">
 <p>側(cè)欄部分內(nèi)容</p>
</p>

       最終效果參考本站首頁，根據(jù)實(shí)際情況p選擇用id還是class，如果是class，那這一類的都會(huì)被固定，而id是唯一一個(gè)。