使用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固定导航栏跳转后内容被遮挡的问题，提升用户体验。
以上就是Bootstrap和MDB固定导航栏跳转后内容被遮挡，如何优雅解决？的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2793561.html
