Scroll

JavaScript重點

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

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

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

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

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

   • 對整個window新增scroll事件

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

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

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

   const scrollHeight = window.pageYOffset;
   

   • window.pageYOffset介紹請見下方參考欄

   • 取得整個Navbar的相對高度

   const navHeight = navbar.getBoundingClientRect().height;
   

   • getBoundingClientRect()介紹請見【19】網頁練習 -Scroll網頁實作(中)

   • 取得整個Navbar的相對高度

   //如果網頁垂直位移量大於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;
     } 
   

   • 控制回頂層按鈕的顯示

   //如果網頁垂直位移量大於500時
   if (scrollHeight > 500) {
   
       //顯示回頂層按鈕
       topLink.classList.add("show-link");
   } else {
   
       //隱藏回頂層按鈕
       topLink.classList.remove("show-link");
   };
   

   • 透過show-link，可以將原本top-link中的visibility由hidden改成visible，進而顯示按鈕

4. 滾動網頁控制

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

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

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

   scrollLinks.forEach((link) => {
       link.addEventListener("click", (e) => {
           //內容...
       });
   });
   

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

   • 停止按鈕的默認動作

   e.preventDefault();
   

   • 意即停止按鈕<a>標籤跳轉的功能，因為我們要另外自己寫跳轉的方式。
   • preventDefault()介紹請參考【15】網頁練習 - Lorem假文產生器。

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

   const id = e.currentTarget.getAttribute("href").slice(1);
   

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

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

   const element = document.getElementById(id);
   

   • 取得整個Navbar的高度

   const navHeight = navbar.getBoundingClientRect().height;
   

   • getBoundingClientRect()的用法，請見【19】網頁練習 -Scroll網頁實作(中)

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

   const containerHeight = linksContainer.getBoundingClientRect().height;
   

   • 確認Navbar是否為固定

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

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

   let position = element.offsetTop - navHeight;
   

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

   • 檢查非固定Navbar時的position

   if (!fixedNav) {
     position = position - navHeight;
   }
   

   • 從主頁面往下滑時，我們會希望他留一個Navbar的寬度，這樣可以放入固定的Navbar :
     
   • 所以此時的position，就得再減去一個Navbar的寬度 :
     

   • 滾動到高度為position的地方

   window.scrollTo({
     left: 0,
     top: position,
   });
   

   • Window.scrollTo()介紹，請見下方參考欄

引用與參考連結

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