滚动触发sticky动画导航栏hover恢复常态功能失效修复

核心问题点 #

你的代码有4个直接导致功能失效的错误：

• 元素获取时机错误：页面初始加载时导航栏未滚动，不存在sticky类，document.querySelector(".sticky")会返回空值，鼠标事件根本没有绑定到导航栏上
• 类名操作逻辑错误：原逻辑悬停时尝试切换navbar基础类，这个类是导航栏所有样式的基础，一旦移除会直接导致导航栏样式整体崩溃，完全不符合需求
• CSS语法错误：.navbar样式块内错误嵌套了.navbar .dropdownlinks规则，原生CSS不支持无预处理器的嵌套写法，会导致后续样式解析异常
• 逻辑缺失：没有编写鼠标移出导航栏后，恢复sticky滚动样式的对应逻辑

修复步骤 #

1. 修正CSS #

首先修复语法错误，新增高优先级的悬停状态样式，覆盖sticky状态的透明效果，不需要靠移除基础类实现样式切换：

body{
    margin: 0;
    padding: 0;
}
.head {
    display: inline-block;
    position: absolute;
    margin: 0;
    background-image: url('pictures/head.jpg');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    padding: 0;
    text-align: center;
    height: 500px;
    width: 100%;
}
.head h1 {
    color: white;
    text-align: center;
    padding: 100px 100px 25px;
    font-family: Copperplate, Monaco, "Lucida Console", monospace;
    font-size: 50px;
}
.head h2 {
    font-family: Copperplate, Monaco, "Lucida Console", monospace;
    font-size: 30px;
    color: white;
}
.navbar .dropbtn {
    background-color: white;
    color: black;
    padding: 16px 16px 14px 16px;
    font-size: 20px;
    border: none;
    cursor: pointer;
    border-left: none;
    border-right: 1px solid grey;
    transition: 0.6s;
}
.sticky .dropbtn {
    background: none;
    color: white;
    padding: 16px 16px 14px 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
    border-left: none;
    border-right: 1px solid grey;
    transition: 0.6s;
}
/* 悬停时覆盖sticky样式，恢复初始样式 */
.navbar.sticky.hovered {
    background-color: white;
}
.navbar.sticky.hovered .dropbtn {
    background-color: white;
    color: black;
    font-size: 20px;
}

.navbar {
    z-index: 1;
    overflow: visible;
    background-color: white;
    position: fixed;
    top: 0;
    width: 100%;
    float: left;
    transition: 0.6s;
}
/* 把原来错误嵌套在.navbar里的规则移到外部 */
.navbar .dropdownlinks {
    float: left;
}
.dropdown {
    position: relative;
    display: inline-block;
    margin: -2px;
}
.dropdown-content {
    display: none;
    position: absolute;
    min-width: 160px;
    background-color: white;
    z-index: 1;
    box-shadow: 0px 8px 16px 0px black;
}
.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    border-bottom: 1px solid black;
}
.dropdown:hover .dropdown-content {
    display: block;
}
.dropdown:hover .dropbtn {
    background-color: red;
    color: white;
}
.navbar img {
    width: 50px;
    height: 50px;
    border-right: 1px solid grey;
    padding-right: 4px;
    top: 0;
    float: left;
}
.dropdown-content a:hover {
    color: white;
    background-color: red;
}
.sticky {
    background: none;
    transition: 0.6s;
}

2. 修正JS逻辑 #

只需要在页面加载时获取一次导航栏元素，不要在初始状态查询不存在的sticky类，通过新增/移除hovered类控制悬停样式，不要改动基础类名：

const navbar = document.querySelector(".navbar");
// 滚动切换sticky类
window.addEventListener("scroll", function(){
    navbar.classList.toggle("sticky", window.scrollY > 0);
    // 滚动时如果鼠标不在导航栏上，自动移除悬停状态
    if(!navbar.matches(':hover')) {
        navbar.classList.remove("hovered");
    }
});
// 鼠标进入sticky状态的导航栏时加hovered类
navbar.addEventListener("mouseenter", function(){
    if(navbar.classList.contains("sticky")) {
        navbar.classList.add("hovered");
    }
});
// 鼠标移出时移除hovered类，恢复sticky样式
navbar.addEventListener("mouseleave", function(){
    navbar.classList.remove("hovered");
});

HTML部分不需要做任何修改，替换原有CSS和JS即可实现需求：页面滚动后导航栏变为透明悬浮样式，鼠标移入时立刻恢复初始白底的导航栏样式，鼠标移出后回到透明悬浮状态，所有过渡动画保留。

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