iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 28
1
Modern Web

實作經典 JavaScript 30系列 第 28

Day28: Sticky Nav

WES BOS系列影片
Alex快速導讀系列影片

今天針對常用的Navbar做fix的狀態
這真的是很常見的功能,可以立馬學起來

1.先抓出NavBar的位置,以及等等需要用到的容器最上部

const nav = document.querySelector('#main')
let topOfNav = nav.offsetTop

2.到Css中寫好fix的狀態

body.fixed-nav nav {
  position: fixed;
  box-shadow: 0 5px 0 rgba(0,0,0,0.1);
}

3.利用JS加上.fixed-nav或移除.fixed-nav,
來控制nav是否需要fix狀態

function fixNav() {
  console.log(topOfNav)
  if(window.scrollY >= topOfNav) {
    document.body.classList.add('fixed-nav')
  } else {
    document.body.classList.remove('fixed-nav')
  }
}
window.addEventListener('scroll', fixNav)

做到這裡會發現fix狀態做好了,但下方的文章會因為navbar變為fix
而產生跳動的情形,這是因為position:fixed時,
此容器(nav)會是漂浮的狀態,對其他容器來說它的寬高等於0
所以我們就需要手動加回去,因fix失去的高度

function fixNav() {
  console.log(topOfNav)
  if(window.scrollY >= topOfNav) {
    document.body.classList.add('fixed-nav')
    document.body.style.paddingTop = nav.offsetHeight + 'px'
  } else {
    document.body.classList.remove('fixed-nav')
    document.body.style.paddingTop = 0;
  }
}

4.logo進場的css,
也是利用.fixed-nav這個class做控制

.fixed-nav li.logo {
  max-width: 500px;
}

今天的練習完成囉,完整的程式碼請直接點擊下方codePen連結
codePen
或者也可以直接到WES BOS的網站下載打包好的檔案
javascript30


上一篇
Day27:Speech Synthesis
下一篇
Day29: Event Capture, Propagation, Bubbling and Once
系列文
實作經典 JavaScript 3030
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言