双导航栏滚动隐藏功能异常：第二个导航栏隐藏后无法恢复的技术求助

嘿，我发现了几个导致secondLineNav向上滚动时无法正常显示的问题，修复后就能让两个导航栏的滚动隐藏/显示逻辑都正常工作了：

问题根源拆解 #

1. 属性名拼写错误：你在第二个脚本里写的window.pageYOffest是笔误，正确的属性名是window.pageYOffset（少了一个t）——这个错误会导致无法正确获取页面滚动距离，直接让滚动判断逻辑失效。
2. CSS位置值缺少单位：设置secondLineNav.style.top = "81"时没加px单位，浏览器无法识别这个位置值，所以向上滚动时导航栏没法回到正确位置。
3. 初始滚动值设置不合理：lastScrollTopb初始设为81不符合滚动逻辑，滚动距离是从页面顶部开始计算的，应该和第一个导航栏一样初始化为0。

修复后的完整代码 #

修正后的JavaScript代码 #

<script type="text/javascript">
var lastScrollTop = 0;
navbar = document.getElementById("navbar");
window.addEventListener("scroll", function () {
var scrollTop = window.pageYOffset || document.documentElement.scrollTop; // 确保拼写正确
if (scrollTop > lastScrollTop) {
navbar.style.top = "-90px";
} else {
navbar.style.top = "0";
}
lastScrollTop = scrollTop;
});
</script>
<script type="text/javascript">
var lastScrollTopb = 0; // 修正初始值
secondLineNav = document.getElementById("secondLineNav");
window.addEventListener("scroll", function () {
var scrollTopb = window.pageYOffset || document.documentElement.scrollTop; // 修复拼写错误
if (scrollTopb > lastScrollTopb) {
secondLineNav.style.top = "-90px";
} else {
secondLineNav.style.top = "81px"; // 添加px单位
}
lastScrollTopb = scrollTopb;
});
</script>

额外优化建议 #

你可以把两个滚动事件监听合并成一个，减少重复代码还能提升性能：

<script type="text/javascript">
var lastScrollTop = 0;
const navbar = document.getElementById("navbar");
const secondLineNav = document.getElementById("secondLineNav");

window.addEventListener("scroll", function () {
const scrollTop = window.pageYOffset || document.documentElement.scrollTop;

// 同时处理两个导航栏的显示/隐藏
if (scrollTop > lastScrollTop) {
navbar.style.top = "-90px";
secondLineNav.style.top = "-90px";
} else {
navbar.style.top = "0";
secondLineNav.style.top = "81px";
}

lastScrollTop = scrollTop;
});
</script>

另外提醒下：你的HTML代码里第一个导航栏的<li><b><a href="indexRace.html">Race</a></b>标签没闭合，记得补上</li>，避免HTML结构错误影响页面渲染。

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