使用bootstrap和mdb框架构建的网站，常遇到固定导航栏遮挡页面内容的问题。本文提供一种优雅的解决方案，避免因页面跳转而导致内容被导航栏遮盖。
问题：在使用Bootstrap和MDB框架构建的网站中，带有固定顶部导航栏和多个section。点击导航链接跳转到不同section时，目标section内容会被导航栏遮挡。虽然调整section的内边距可以解决，但不够优雅且需要修改页面结构。
根本原因：页面跳转后，浏览器默认将页面内容顶部定位到窗口顶部，导致固定导航栏覆盖目标内容。
解决方案：利用JavaScript在跳转后调整滚动条位置。无需修改HTML结构，即可实现优雅的跳转效果。 以下代码实现跳转后向上滚动10vh：
document.querySelectorAll('.nav-link').forEach(link => {
link.addEventListener('click', (e) => {
e.preventDefault(); // 阻止默认跳转
const targetId = link.getAttribute('href').substring(1); // 获取目标section ID
const targetElement = document.getElementById(targetId);
if (targetElement) {
targetElement.scrollIntoView({ behavior: 'smooth', block: 'start' }); // 平滑滚动到目标元素顶部
window.scrollBy(0, -window.innerHeight * 0.1); // 向上滚动10vh
}
});
});
代码说明：
-
document.querySelectorAll('.nav-link')：选择所有具有.nav-link类的导航链接。 -
link.addEventListener('click', (e) => { ... });：为每个链接添加点击事件监听器。 -
e.preventDefault();：阻止默认跳转行为。 -
targetId = link.getAttribute('href').substring(1);：提取目标section的ID（假设href属性为#sectionID）。 -
targetElement.scrollIntoView({ behavior: 'smooth', block: 'start' });：平滑滚动到目标元素的顶部。 -
window.scrollBy(0, -window.innerHeight * 0.1);：向上滚动窗口高度的10%。
注意：此代码假设section具有唯一ID，且与导航链接的href属性对应。 根据实际项目结构调整代码。 smooth参数确保滚动动画平滑。
通过此方法，在不修改HTML结构的情况下，即可解决Bootstrap/MDB固定导航栏跳转后内容被遮挡的问题，提升用户体验。
