目標

利用 CSS 來讓製作網站的置頂選單

Demo | Github

處理步驟

利用 CSS 的 position 固定後，再使用 transform 來強調凸顯內容，撰寫一部分 JS ，調整內容的位置。

步驟 1.

建立卷軸移動觸發事件

const nav = document.querySelector("#main");

// 取得選單 top
let topOfNav = nav.offsetTop;

// 修正選單
function fixNav() {
}

// 建立卷軸移動事件
window.addEventListener("scroll", fixNav);

步驟 2.

建立固定標題列的 CSS

* 固定標題 */
body.fixed-nav nav {
  position: fixed;
  box-shadow:0 5px 0 rgba(0,0,0,0.1);
}

然後在 fixNav 中，判斷卷軸移動位置，動態增加樣式

// 修正選單
function fixNav() {
  if (window.scrollY >= topOfNav) {
    document.body.classList.add("fixed-nav");
  } else {
    document.body.classList.remove("fixed-nav");
  }
}

步驟 3.

增加標題列的 logo 樣式，並讓標題列置頂時顯示，並調整內文的文字大小

/* 顯示標題 logo */
.fixed-nav li.logo {
  max-width:500px;
}

/* 內容比例調整為原本文字大小 */
body.fixed-nav .site-wrap {
  transform: scale(1);
}

增加內文 padding 避免內文因為凍結標題列而被遮蔽

// 修正選單
function fixNav() {
  if (window.scrollY >= topOfNav) {

    // 增加內文 padding 避免內文因為凍結標題列而被遮蔽
    document.body.style.paddingTop = nav.offsetHeight + 'px';
    document.body.classList.add("fixed-nav");
    
  } else {
    document.body.classList.remove("fixed-nav");
    document.body.style.paddingTop = 0;
  }
}

筆記與備註事項

CSS 部分

position

CSS position属性用于指定一个元素在文档中的定位方式。top，right，bottom 和 left 属性则决定了该元素的最终位置。

定位类型

定位元素（positioned element）是其计算后位置属性为 relative, absolute, fixed 或 sticky 的一个元素。
相对定位元素（relatively positioned element）是计算后位置属性为 relative 的元素。
绝对定位元素（absolutely positioned element）是计算后位置属性为 absolute 或 fixed 的元素。
粘性定位元素（stickily positioned element）是计算后位置属性为 sticky 的元素。

資料來源 - MDN

ShunNien's Blog

JS30紀錄 24-Sticky Nav

目標