Day24 Sticky Nav

發表於 | 分類於 | 閱讀次數:
| 256

Demo

本次範例的效果是當卷軸往下滾動時
將原本不再網頁頂端的選單黏在網頁頂端

範例是透過計算高度、position屬性fixed等功能完成
這邊我們使用一個最近剛學到的position值sticky

sticky

MDN範例解說

我們只要在原本範例的css中修改position屬性即可達到這樣的效果

1
2
3
4
5
6
7
8
9
nav {
  background:black;
  position: sticky;
  top:0;
  width: 100%;
  transition:all 0.5s;
  /* position: relative; */
  z-index: 1;
}

需搭配top:0px，距離頂部0px。

卷軸於指定範圍內時，替logo切換class即可。
自訂showlogo這個class，注意優先權即可

1
2
3
li.showlogo{
  max-width: 500px;
}

最後加入程式碼

1
2
3
4
5
6
7
8
const menutop = document.querySelector('#main').offsetTop
const logo = document.querySelector('.logo')

function handler() {
  window.scrollY >= menutop ? logo.classList.add('showlogo') : logo.classList.remove('showlogo')
}

window.addEventListener('scroll', handler)

補充：
offsetTop：相對於父層元素的頂部的距離。非相對於整個網站的頂部距離。

JS中offsetTop、clientTop、scrollTop、offsetTop各屬性介紹

0%