iT邦幫忙

2021 iThome 鐵人賽

1
Modern Web

JavaScript 從 50% 開始,打造函式庫不是問題!系列 第 40

JS 40 - 向下滾動網頁即自動隱藏導覽列

  • 分享至 

  • xImage
  •  

大家好!

今天我們要實作向下滾動網頁時,自動隱藏頁手或導覽列的效果。
我們進入今天的主題吧!


樣式

header {
    transition: transform 0.5s;
}

header.invisible {
    transform: translateY(-100%);
}

程式碼

(function () {
    let prevPos = window.pageYOffset;
    const header = Felix('header')[0];
    Felix(window).on('scroll', function () {
        const currPos = window.pageYOffset;
        const status = currPos > prevPos && currPos > header.getBoundingClientRect().bottom;
        header.classList[status ? 'add' : 'remove']('invisible');
        prevPos = currPos;
    });
})();

實測

<header>
    <!-- ... -->
</header>

範例連結製作中。


差不多也到尾聲了。
如果對文章有任何疑問,也歡迎在下方提問和建議!
我是 Felix,我們明天再見!


上一篇
JS 39 - 平滑調整網頁字型大小
下一篇
JS 41 - 顯示非同步請求的上傳進度條
系列文
JavaScript 從 50% 開始,打造函式庫不是問題!46
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言