链接到页面锚垫顶部答案

【问题标题】：Link to Page Anchor pad top链接到页面锚垫顶部
【发布时间】：2014-02-27 23:50:08
【问题描述】：

我的页面顶部有一个粘性导航，我也有一个作为右列。

我的问题是，当我将侧边导航链接到锚点时，它会将页面滚动到该锚点并将其放在顶部导航的后面。

无论如何我可以拥有它，因此它将页面滚动到实际锚点上方的100px，因此它不在顶部粘性导航的后面？

我在顶部导航中使用带有affix-top 的引导程序，在右栏导航中使用data-spy="scroll" and alsoaffix`

粗体

由于我使用的是data-spy="scroll"，这会影响scrollspy 的工作方式，因为锚在更改侧面导航上的间谍之前位于顶部导航的后面。

这就是为什么我不想在我的锚点上有一个偏移量。

【问题讨论】：

标签： html css nav

【解决方案1】：

只要您可以设置它，使其不会干扰您的其余布局，以下是一种简单的方式来做您想做的事：

Jsfiddle 示例：http://jsfiddle.net/qWHgR/

selector {
    padding-top: 200px;
    margin-top: -200px;
}

我个人对 Scrollspy 并不熟悉，因此如果偏移量成为问题，您可能需要对其进行一些小改动。

【讨论】：

【解决方案2】：

+1 @Nit 建议。我喜欢它在内联和块级元素上的出色表现，没想到。

http://jsfiddle.net/gCs7C/

HTML：

<nav>
    <a href="#hash">Scroll to content</a>
</nav>
<div>Spacer</div>
<div>
    Spacer<br />
    <span id="hash">Content</span>
</div>

CSS：

html, body {
   padding: 0;
   margin: 0;
}

div {
    height: 1000px;
}

nav {
    position: fixed;
    height: 24px;
    width: 100%;
    background-color: yellow;
}

#hash {
    padding-top: 24px;
    margin-top: -24px;
}

【讨论】：