就是這麼簡單 - 捲動時Header區和導引列固定在上方
頁面往下捲時頁面上方的Logo和導引列都跟著捲走，使用上就會有點不便。
要讓標題區和導引列不隨著捲動，最簡單手法就是在將要固定的區塊的css加上position:fixed。不過若標題區塊高度較大，捲動後可閱讀區剩下就不多，閱讀性就不好。另外，標題區最下方的底色和捲動中色彩無法明顯區隔或融合，這也會造成不佳視覺和閱讀性。
要讓標題區和導引列在頁面往下卷時，自動黏在上方並且配合閱讀自動調整，只要參照下列說明在$(document).ready中加入jQuery就可讓頁面動起來更舒適哦，也會讓自己設計的頁面更貼近潮流設計。
《例》
假設頁面上方Html結構如下，要在捲動時將 id=header這區黏在上方，並縮小標題區和導引列的高度及CSS等調整效果。- <div id="header">
- <div>(Logo標題區)</div>
- <div>(導引列)</div>
- </div>
《jquery基本語法》
- k=與頂端參考距離值; ##若Header區上方還有區域時，此值可用 $(#header).offset().top;
- $(window).scroll(function(){
- s = $(document).scrollTop();
- var fh_header=$(#header)..height();/*取出原本的header高度，便於捲回時回復原高度*/
- if(s > k){ /*當捲動超過目標值時，變成固定及相關CSS變化*/
- $(#header).css({
- position:"fixed", /*變成固定*/
- "z-index": 10000, ##值要大頁面上區塊設定的z-index，可以設大一點
- ....其他CSS變化如高度、背景色等.....
- )};
- }else{ /*當捲動超過目標值時，取消固定及回覆CSS變化*/
- $(#header).css({
- position:"static", ##取消固定
- "z-index": 1, ##不改也可以，視z-index安排
- height: fh_header;/*回復原高度*/*/
- ....其他CSS變化如高度、背景色等.....
- )};
- }
- )};
《其他應用》
- 其他的css設定就依照《 屬性名：值》進行設定，例: border-bottom: "solid 2px #000333";
- 也可應用新增和移除class取代直接設定css來達成變換css效果，$(#header).addClass("己定義CSS名");$(#header).removeClass("己定義CSS名");
~~繡球花~~
