如何使用JavaScript实现滚动到窗口顶部时恢复导航栏原有样式

你现有代码只要触发滚动事件就会给导航栏添加postConv类，没有对滚动位置做判断，所以滚动回顶部后样式不会自动恢复。只需在滚动事件回调中增加滚动位置的判断逻辑即可实现需求，修改后的JavaScript代码如下：

var body = document.querySelector("body");
var navbar = document.querySelector(".navbar");
var cover = document.querySelector(".cover");

body.onscroll = function() {
    // 垂直滚动距离大于0即离开顶部时添加样式
    if (window.scrollY > 0) {
        navbar.classList.add("postConv");
    } else {
        // 回到顶部时移除样式
        navbar.classList.remove("postConv");
    }
}

如果希望滚动超过一定距离再切换样式，避免微幅滚动就触发样式变化，可以把判断条件里的0改为你需要的阈值（比如50，代表滚动超过50像素再切换样式）。如果原有changeNavbarStyle、removeNavbarStyle两个方法没有其他地方调用，可以直接删除冗余代码。

内容的提问来源于stack exchange，提问作者Emil