Question

我在网站和桌面视图上使用Bootstrap，我将导航栏停留在顶部。我希望部分链接能够避免这种差距（我相信60px）。所以，当我有... ...

<a href="#SectionID">Section Link</a>

有没有办法让它尊重顶部导航栏消耗的60px？

注意：如果相关网站当前正在使用Bootstrap 2，但我正在将其移至3.如果两者之间的解决方案不同......或者，如果一个版本固有地这样做，我很想知道这些差异。

编辑： 我想要链接的元素，使其上方的间隙不是实际的a标签本身。另外，如果它是JS或CSS解决方案，我可以更少关心。如果某人禁用了JavaScript，我可能会因为它的当前外观而感到轻微烦恼。

Answer 1

将style="margin-top:60px"添加到您的代码中 - 这会降低其位置

或将其放在div标记内例如：

<div style="top:60px">
<a href="#SectionID">Section Link</a>
</div>

修改的

我希望我现在明白这个问题，如果没有，抱歉

你可以把这个javascript放在页面上

if (window.location.href.indexOf('#') != -1){ window.scrollBy(0, -60) }

这样，页面找到所需的部分，然后在加载后立即向下滚动60px，使得部分标题显示在导航栏下方

部分/内部链接 - 点击上方留出边距

1 个答案: