JS 40 - 向下滚动网页即自动隐藏导览列

大家好！

今天我们要实作向下滚动网页时，自动隐藏页手或导览列的效果。
我们进入今天的主题吧！

样式

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，我们明天再见！