Scroll

JavaScript重點

  1. Navbar之固定顯示 & 回頂層按鈕之設定

    • 利用id="nav"去抓取整個Navbar

      1
      const navbar = document.getElementById("nav");

    • 利用class="top-link"去抓取回頂層按鈕

      1
      const topLink = document.querySelector(".top-link");

    • 對整個window新增scroll事件

      1
      2
      3
      window.addEventListener("scroll", function () {
          //內容...
      });

      以下程式碼皆包含於window.addEventListener()中

    • 記錄網頁在捲軸的垂直方向位移量

      1
      const scrollHeight = window.pageYOffset;
      • window.pageYOffset介紹請見下方參考欄

    • 取得整個Navbar的相對高度

      1
      const navHeight = navbar.getBoundingClientRect().height;

    • 取得整個Navbar的相對高度

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      //如果網頁垂直位移量大於Navbar的相對高度
      //也就是當網頁下滑到看不見Navbar時
      if (scrollHeight > navHeight) {

          //Navbar固定顯示
          navbar.classList.add("fixed-nav");
          
      } else {
          
          //Navbar取消固定顯示
          navbar.classList.remove("fixed-nav");
      }
      • 我們透過CSS來控制Navbar如何固定顯示 :

      .fixed-nav {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      background: var(–clr-white);
      box-shadow: var(–light-shadow);
      }
      .fixed-nav .links a {
      color: var(–clr-grey-1);
      }
      .fixed-nav .links a:hover {
      color: var(–clr-secondary);
      }
      .fixed-nav .links-container {
      height: auto !important;
      }

    • 控制回頂層按鈕的顯示

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      //如果網頁垂直位移量大於500時
      if (scrollHeight > 500) {

          //顯示回頂層按鈕
          topLink.classList.add("show-link");
      } else {

          //隱藏回頂層按鈕
          topLink.classList.remove("show-link");
      };
      • 透過show-link，可以將原本top-link中的visibility由hidden改成visible，進而顯示按鈕

  2. 滾動網頁控制

    • 利用class="scroll-link"去抓取所有連結按鈕

      1
      const scrollLinks = document.querySelectorAll(".scroll-link");

    • 對每個連結按鈕都新增點擊事件

      1
      2
      3
      4
      5
      scrollLinks.forEach((link) => {
          link.addEventListener("click", (e) => {
              //內容...
          });
      });

      以下程式碼皆包含於link.addEventListener()中

    • 停止按鈕的默認動作

      1
      e.preventDefault();

    • 對選單按鈕新增點擊事件

      1
      const id = e.currentTarget.getAttribute("href").slice(1);
      • element.getAttribute(name)會回傳element指定的屬性值。在例子中，將會回傳#home的id字串
      • 之後再用string.slice(beginSlice)方法，將beginSlice設為1，就可以去除id字串的第一個字(也就是#)

    • 透過id字串，去取得被點擊按鈕的類別

      1
      const element = document.getElementById(id);

    • 取得整個Navbar的高度

      1
      const navHeight = navbar.getBoundingClientRect().height;

    • 取得選單<ul>的相對高度

      1
      const containerHeight = linksContainer.getBoundingClientRect().height;

    • 確認Navbar是否為固定

      1
      const fixedNav = navbar.classList.contains("fixed-nav");

    • 取得內容區域與Navbar的距離

      1
      let position = element.offsetTop - navHeight;
      • element.offsetTop : 可以取得該元素上方邊緣與網頁實際上方邊緣的差距
      • 以About按鈕為例 :

    • 檢查非固定Navbar時的position

      1
      2
      3
      if (!fixedNav) {
        position = position - navHeight;
      }
      • 從主頁面往下滑時，我們會希望他留一個Navbar的寬度，這樣可以放入固定的Navbar :
      • 所以此時的position，就得再減去一個Navbar的寬度 :

    • 滾動到高度為position的地方

      1
      2
      3
      4
      window.scrollTo({
        left: 0,
        top: position,
      });
      • Window.scrollTo()介紹，請見下方參考欄

引用與參考連結

  1. window.pageYOffset()介紹
  2. event.preventDefault()介紹
  3. string.slice()介紹
  4. Window.scrollTo()介紹