fix: 统一所有页面导航栏样式和位置
- 修复导航栏在不同页面显示不一致的问题 - 锁定导航栏位置,移除滚动动画 - 强制设置白色背景和高z-index确保导航栏始终在最顶层 - 统一index.html和pages目录下所有页面的导航栏表现
This commit is contained in:
@@ -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';
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user