fix: 统一所有页面导航栏样式和位置

- 修复导航栏在不同页面显示不一致的问题
- 锁定导航栏位置,移除滚动动画
- 强制设置白色背景和高z-index确保导航栏始终在最顶层
- 统一index.html和pages目录下所有页面的导航栏表现
This commit is contained in:
Yep_Q
2025-09-09 20:55:20 +08:00
parent e665ee15ea
commit 6d3825c4ab
9 changed files with 66 additions and 30 deletions

View File

@@ -78,17 +78,15 @@
function initNav() {
const navElement = document.querySelector('nav') || document.getElementById('navbar');
if (navElement) {
// 保留原有的class和id
const originalClasses = navElement.className;
const originalId = navElement.id;
// 统一设置导航栏样式 - 确保所有页面一致
navElement.className = 'fixed top-0 w-full bg-white shadow-md z-50 transition-all duration-300';
navElement.id = 'navbar';
navElement.style.backgroundColor = 'white';
navElement.style.zIndex = '9999';
// 更新导航内容
navElement.innerHTML = generateNavHTML();
// 恢复原有属性
if (originalClasses) navElement.className = originalClasses;
if (originalId) navElement.id = originalId;
// 添加移动端菜单交互
const mobileMenuButton = document.getElementById('mobile-menu-button');
const mobileMenu = document.getElementById('mobile-menu');
@@ -106,28 +104,12 @@
});
}
// 添加滚动效果
let lastScrollTop = 0;
window.addEventListener('scroll', () => {
const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
if (scrollTop > lastScrollTop && scrollTop > 100) {
// 向下滚动 - 隐藏导航
navElement.style.transform = 'translateY(-100%)';
} else {
// 向上滚动 - 显示导航
navElement.style.transform = 'translateY(0)';
}
// 添加背景效果
if (scrollTop > 50) {
navElement.classList.add('bg-white/95', 'backdrop-blur-md');
} else {
navElement.classList.remove('bg-white/95', 'backdrop-blur-md');
}
lastScrollTop = scrollTop;
});
// 保持导航栏始终可见,不添加滚动隐藏效果
// 确保导航栏始终在最顶层
navElement.style.position = 'fixed';
navElement.style.top = '0';
navElement.style.left = '0';
navElement.style.right = '0';
}
}