Bootstrap和MDB固定导航栏遮挡内容：如何优雅地解决页面跳转后内容被遮挡的问题？

解决bootstrap和mdb固定导航栏遮挡内容的问题

使用Bootstrap和MDB框架构建网站时，固定导航栏遮挡内容是一个常见问题。尤其在页面跳转后，目标内容区域会被导航栏遮挡。本文提供一种优雅的解决方案，无需修改HTML结构，即可在页面跳转后自动调整滚动位置，避免内容被遮挡。

问题：点击导航链接跳转到目标内容区域后，由于固定导航栏的存在，部分内容被遮挡。

解决方案：利用JavaScript的scrollIntoView()方法结合偏移量，实现跳转后页面自动滚动到目标位置并向上偏移。

核心代码：

降重鸟

要想效果好，就用降重鸟。AI改写智能降低AIGC率和重复率。

308

查看详情

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%视口高度
      }
    });
  });
});

代码解释：

1. document.addEventListener('DOMContentLoaded', ...): 确保代码在DOM加载完成后执行。
2. document.querySelectorAll('.nav-link'): 选择所有具有.nav-link类的导航链接。
3. link.addEventListener('click', ...): 为每个链接添加点击事件监听器。
4. event.preventDefault(): 阻止默认的跳转行为。
5. const targetId = link.getAttribute('href').substring(1);: 获取链接的href属性值，去除#符号，得到目标元素的ID。
6. const targetElement = document.getElementById(targetId);: 获取目标元素。
7. targetElement.scrollIntoView({ behavior: 'smooth', block: 'start' });: 将目标元素滚动到视口顶部，behavior: 'smooth'实现平滑滚动，block: 'start'确保滚动到元素的顶部。
8. *`window.scrollBy(0, -window.innerHeight 0.1);`:** 向上滚动视口高度的10%，从而避免内容被导航栏遮挡。 您可以根据导航栏高度调整这个偏移量。

此方法无需修改HTML结构，只需在JavaScript中添加少量代码，即可优雅地解决页面跳转后内容被固定导航栏遮挡的问题。 记住将这段JavaScript代码放在标签的结束标签之前，或者放在一个DOMContentLoaded事件监听器中。

以上就是Bootstrap和MDB固定导航栏遮挡内容：如何优雅地解决页面跳转后内容被遮挡的问题？的详细内容，更多请关注php中文网其它相关文章！