網頁設計中,特別是自適應布局,如果頁面過長,用戶下拉或滾動鼠標時,頭部導航就看不到了。可以設計網頁導航固定在頁面頂部,讓用戶方便點擊;設置頁面側欄固定的原因主要有:
①主欄內容很長,側欄較短,用戶滾動瀏覽時,側欄就空白了,考慮布局時就需要固定側欄全部或部分內容。
②強調主要內容,方便用戶進行擴展閱讀,增加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
發表評論
評論列表(條)