SOURCE

var prevScrollpos = window.pageYOffset; // 记录上一次滚动的位置
window.onscroll = function() {
    var currentScrollPos = window.pageYOffset; // 获取当前滚动的位置
    if (prevScrollpos > currentScrollPos) { // 向上滚动
        document.querySelector(".navbar").style.top = "0"; // 显示导航栏
    } else { // 向下滚动
        document.querySelector(".navbar").style.top = "-60px"; // 隐藏导航栏
    }
    prevScrollpos = currentScrollPos; // 更新上一次滚动的位置
}

<nav class="navbar">
    <!-- 导航栏内容 -->
    <h1>我的网站</h1>
</nav>
<div class="content">
    <!-- 页面内容 -->
</div>

/* 设置导航栏样式 */
.navbar {
    position: fixed; /* 将导航栏固定在页面顶部 */
    top: 0;
    width: 100%;
    background-color: #333;
    color: #fff;
    padding: 10px;
    transition: top 0.3s; /* 添加过渡效果 */
}
/* 设置页面内容样式 */
.content {
    height: 2000px; /* 设置一个足够长的内容区域以便滚动 */
    padding-top: 60px; /* 确保内容不会被导航栏遮挡 */
}
* {
    padding: 0;
    margin: 0;
}