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標籤 ~
<header id="header">
<nav>
<a href="#">menu-1</a>
<a href="#">menu-2</a>
<a href="#">menu-3</a>
</nav>
</header>
”接著就是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
}
});
就是這樣 , 如果你要讓這個效果更酷 , 你只要針對CSS去做動畫樣式即可
jQuery的語法就是只需要如此！
這種效果不適合用 stop . animation 的方式 , 效果會慢很大一拍！
留言列表
