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

代码说明：

YOYA优雅

多模态AI内容创作平台

106

查看详情

1. document.querySelectorAll('.nav-link')：选择所有具有.nav-link类的导航链接。
2. link.addEventListener('click', (e) => { ... });：为每个链接添加点击事件监听器。
3. e.preventDefault();：阻止默认跳转行为。
4. targetId = link.getAttribute('href').substring(1);：提取目标section的ID（假设href属性为#sectionID）。
5. targetElement.scrollIntoView({ behavior: 'smooth', block: 'start' });：平滑滚动到目标元素的顶部。
6. window.scrollBy(0, -window.innerHeight * 0.1);：向上滚动窗口高度的10%。

注意：此代码假设section具有唯一ID，且与导航链接的href属性对应。 根据实际项目结构调整代码。 smooth参数确保滚动动画平滑。

通过此方法，在不修改HTML结构的情况下，即可解决Bootstrap/MDB固定导航栏跳转后内容被遮挡的问题，提升用户体验。

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