解决bootstrap和mdb固定导航栏遮挡内容的问题
使用Bootstrap和MDB框架构建网站时，固定导航栏遮挡内容是一个常见问题。尤其在页面跳转后，目标内容区域会被导航栏遮挡。本文提供一种优雅的解决方案，无需修改HTML结构，即可在页面跳转后自动调整滚动位置，避免内容被遮挡。
问题：点击导航链接跳转到目标内容区域后，由于固定导航栏的存在，部分内容被遮挡。
解决方案：利用JavaScript的scrollIntoView()方法结合偏移量，实现跳转后页面自动滚动到目标位置并向上偏移。
核心代码：
document.addEventListener('DOMContentLoaded', function() {
document.querySelectorAll('.nav-link').forEach(link => {
link.addEventListener('click', (event) => {
event.preventDefault();
const targetId = link.getAttribute('href').substring(1);
const targetElement = document.getElementById(targetId);
if (targetElement) {
targetElement.scrollIntoView({ behavior: 'smooth', block: 'start' });
window.scrollBy(0, -window.innerHeight * 0.1); // 向上偏移10%视口高度
}
});
});
});
代码解释：
-
document.addEventListener('DOMContentLoaded', ...): 确保代码在DOM加载完成后执行。 -
document.querySelectorAll('.nav-link'): 选择所有具有.nav-link类的导航链接。 -
link.addEventListener('click', ...): 为每个链接添加点击事件监听器。 -
event.preventDefault(): 阻止默认的跳转行为。 -
const targetId = link.getAttribute('href').substring(1);: 获取链接的href属性值，去除#符号，得到目标元素的ID。 -
const targetElement = document.getElementById(targetId);: 获取目标元素。 -
targetElement.scrollIntoView({ behavior: 'smooth', block: 'start' });: 将目标元素滚动到视口顶部，behavior: 'smooth'实现平滑滚动，block: 'start'确保滚动到元素的顶部。 - *`window.scrollBy(0, -window.innerHeight 0.1);`:** 向上滚动视口高度的10%，从而避免内容被导航栏遮挡。 您可以根据导航栏高度调整这个偏移量。
此方法无需修改HTML结构，只需在JavaScript中添加少量代码，即可优雅地解决页面跳转后内容被固定导航栏遮挡的问题。 记住将这段JavaScript代码放在标签的结束标签之前，或者放在一个DOMContentLoaded事件监听器中。
