Bootstrap和MDB固定导航栏跳转后内容被遮挡，如何优雅解决？-html教程-PHP中文网

Bootstrap和MDB固定导航栏跳转后内容被遮挡，如何优雅解决？

使用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
    }
  });
});

代码说明：

page-agent 浏览器控制（CDP）

使用 page-agent CLI（CDP）控制浏览器；CLI只能通过 GitHub Release 的 .tgz 安装，npm 官方包暂未发布。

下载

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%。