最新消息:XAMPP默认安装之后是很不安全的,我们只需要点击左方菜单的 "安全"选项,按照向导操作即可完成安全设置。

Day24 Sticky Nav

XAMPP下载 admin 606浏览 0评论
 Day24 Sticky Nav
第24天實作要做出向下捲動頁面時,遇到導覽列時,其導覽列會固定在網頁上方,導覽列也會有所變化。當網頁向下滾動時,導覽列也會固定在上方,但當網頁向上捲動回到特定位置,導覽列會回到原本位置。

在網頁中上至下的結構為圖片,導覽列,內容。首先要取得導覽列nav導覽列離網頁最上方的距離,

const topNav = nav.offsetTop
接下來取得網頁向下捲動的距離window.scrollY,加入判斷當向下捲動的距離>=導覽列nav的距離時,將body加入CSS的Class,其Class的目的是將導覽列nav給固定住。為何要加在body中,因為只要加入body中,之後加入變化的效果時,只需要改變的CSS內容即可。

.nav-fix{
position: fixed;
}
但此時會生一個小問題,就是當nav固定在網頁上方時會產生一個跳動的動畫,才造成元素的貼合,因此為了避免這個問題的發生,在body的元素中加入上邊內距paddingTop等同nav的高度。

document.body.style.paddingTop = nav.offsetHeight + ‘px’
再當解除固定nav時,再將其上邊內距paddingTop回復成原本的樣式。

document.body.style.paddingTop = 0
再當nav固定在網頁上時,讓nav其中的一個元素呈現出來。一開始nav中類別為.logo的元素的寬度為0,因此當nav固定在網頁上時,將.logo的寬度設為300px。

.fixedNav li.logo{
max-width: 300px;
}
這樣當nav固定時,.logo的寬度即可從0px成長至300px。

接下來是網頁的內容也要隨著nav的固定,內容的呈現效果將其放大。

.fixedNav .site-wrap{
transform: scale(1);
}
一開始網頁內容的縮放為transform: scale(0.98);,在nav固定在網頁時,將其放大為transform: scale(1)。

這樣就可以做到本實作的目標。

Html
<h1>A story about getting lost.</h1>
</header>

<nav id=”main”>
<ul>
<li class=”logo”><a href=”#”>LOST.</a><>
<li><a href=”#”>Home</a><>
<li><a href=”#”>About</a><>
<li><a href=”#”>Images</a><>
<li><a href=”#”>Locations</a><>
<li><a href=”#”>Maps</a><>
</ul>
</nav>

<div class=”site-wrap”>
內容
</div>
Javascript
scroll
scroll滾動事件在元素上。
CSS
position
static 無定位
relative 相對定位
absolute 絕對定位
fixed 畫面絕對定位[1]
sticky 滾動黏滯定位[2]

转载请注明:XAMPP中文组官网 » Day24 Sticky Nav

您必须 登录 才能发表评论!