iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 24
0
Modern Web

JavaScript 30實作心得筆記系列 第 24

Day24 Sticky Nav

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>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Images</a></li>
        <li><a href="#">Locations</a></li>
        <li><a href="#">Maps</a></li>
      </ul>
    </nav>
  
    <div class="site-wrap">
        內容
    </div>

Javascript

  1. scroll
    scroll滾動事件在元素上。

CSS

  1. position
    1. static 無定位
    2. relative 相對定位
    3. absolute 絕對定位
    4. fixed 畫面絕對定位[1]
    5. sticky 滾動黏滯定位[2]
tags: position,

上一篇
Day23 Follow Along Links
下一篇
Day25 Event Capture, Propagation, Bubbling and Once
系列文
JavaScript 30實作心得筆記30

尚未有邦友留言

立即登入留言