Greasy Fork

scroll2078

navigation bar behavior based on scroll bar

目前为 2024-04-01 提交的版本。查看 最新版本

此脚本不应直接安装,它是一个供其他脚本使用的外部库。如果您需要使用该库,请在脚本元属性加入:// @require https://update.greasyfork.cloud/scripts/491240/1352551/scroll2078.js

document.addEventListener('DOMContentLoaded', function () {
    createElementNavbar();

    const navbar = document.querySelector('.navigation + .header + .navbar');

    let lastScrollTop = 0;

    navbar.style.top = '-20px';

    function handleScroll() {
        let scrollTop = window.pageYOffset || document.documentElement.scrollTop;
        let delta = scrollTop - lastScrollTop;

        if (delta > 0) {
            navbar.style.top = '-72px';
        } else {
            let navbarTop = Math.min(0, -52 + scrollTop);
            navbar.style.top = `${navbarTop}px`;
        }

        lastScrollTop = scrollTop;
    }

    window.addEventListener('scroll', handleScroll);
});