網頁 scroll fixed Menu , jQuery + Css 打造浮動選單ㄌ @ 牆壁彩繪 / Lin.mo 里莫彩繪事務所 , 藝術設計,

Scroll fixed Menu

浮動的網頁選單其實是非常容易的 , 例如我想讓它永遠固定在上方, 方便使用者

隨時都可以點選想進去的畫面 , 最基本在無特效的狀況下, 就是Css 設定

position: fixed;

並讓它的層級在最上層的設定像是...

#header {
position: fixed;
top:0;
left: 0;
right: 0;
z-index: 99999;
width: 100%;
}

這樣就能呈現最基本所謂的浮動 menu , 比方說我要當視窗滾動到一個程度後

選單才會從上方用滑動的方式由上往下滑進 , 如果想加這類效果光靠css

是不夠的 , 你必須與 js 做互相對應才行, 這個效果必須要用到的函示為

“scroll“

首先一定要有html標籤 ~

”接著就是Css“

#header {
position: absolute; //預設只讓它浮動但不要用fixed固定
top:0;
left: 0;
right: 0;
z-index: 99999;
background: #fff;
height: 100px;
width: 100%;
}
#header nav {
text-align: center;
}
#header a {
display: inline-block;
padding: 7px 10px;
}

接著在這邊我另外編寫一段css , 這是要讓你menu在切換樣式時候調用的

請自定義名稱, 另如就叫做 scroll ~~

.scroll {
position: fixed;
background: #000;
}
.scroll a {
color: #fff;
}

我這邊的預設是要讓header在變換樣式時由白底變成黑底白字

”接著就是JQuery語法了“

非常短的幾句就可以完成這個效果了

$(window).scroll(function(){ //當視窗滾動時
      if ( $(this).scrollTop() > 100) { //如果視窗向下滾動100px
       $('#header').addClass('scroll');  //header 加上我們剛剛寫好的scroll css
      } else {
       $('#nheader').removeClass('scroll'); //如果沒有的話就刪除 scroll css
     }
  });