如何抵消固定导航栏将我带到的位置？

Posted 2023-04-13

【中文标题】如何抵消固定导航栏将我带到的位置？

【英文标题】：How do I offset where my fixed nav bar takes me?

【发布时间】：2012-11-13 09:22:04

【问题描述】：

我的网站上有一个固定的导航栏，它位于顶部，带有可将我带到页面下方不同部分的链接。但是，因为我的固定导航栏的高度为 40px，所以每个部分的开头 40px 都被覆盖了。我将如何使用 html 或 CSS 将我的链接带我的位置偏移 40 像素？ 谢谢。

【问题讨论】：

您是否尝试将top-margin: 40px; 设置为内容div？

bborisovs，不幸的是，这不起作用。布赖恩，有趣的问题，我也一直在想这个。不过不要相信这是可能的..

对我来说最好的方法是使用javascript：var shiftWindow = function() scrollBy(0, -50) ; if (location.hash) shiftWindow(); window.addEventListener("hashchange", shiftWindow);

【参考方案1】：

您可以尝试将“虚拟”锚点绝对定位在每个部分顶部上方 40 像素处。您可以给它们零宽度/高度和隐藏可见性，以确保这些锚点不会影响页面的显示方式。当用户单击固定导航栏中的链接之一时，窗口将滚动到虚拟锚点的顶部，在其实际部分的开头上方 40 像素处。

示例 HTML：

<div class="navbar">
  <a href="#anchor1">Anchor 1</a>
  <a href="#anchor2">Anchor 2</a>
  <a href="#anchor3">Anchor 3</a>
</div>
<div class="section">
  <span id="anchor1" class="anchor"></span>
  Section Content
</div>
<div class="section">
  <span id="anchor2" class="anchor"></span>
  Section Content
</div>
<div class="section">
  <span id="anchor3" class="anchor"></span>
  Section Content
</div>​

示例 CSS：

body 
    padding-top: 40px;

.navbar 
    position: fixed;
    width: 100%;
    height: 40px;
    top: 0;
    left: 0;
    z-index: 10;
    border-bottom: 1px solid #ccc;
    background: #eee;

.section 
    position: relative;

.anchor 
    display: block;
    position: absolute;
    width: 0;
    height: 0;
    z-index: -1;
    top: -40px;
    left: 0;
    visibility: hidden;

有关工作示例，请参阅http://jsfiddle.net/HV7QL/

编辑： CSS3 还包括:target 伪类，它适用于其id 已被文档中链接的href 或哈希引用的元素URL 的值。您可以在 :target 的顶部应用 40 像素的填充，该填充将仅应用于用户从固定导航栏中选择的部分。

示例 CSS：

.section:target 
    padding-top: 40px;

这在语义上比上述方法更清晰，但不适用于旧版浏览器。

工作示例：http://jsfiddle.net/5Ngft/

【讨论】：

哇，你的第二个答案真的很好。我认为唯一的问题是，虽然您的目标 # 仍在 url 中，但该元素将保留填充。因此，如果您再次向上滚动，页面中就会出现这种奇怪的空白。

这行得通，但没有我想要的那么干净。我喜欢工作，但代码肯定会更干净。

【参考方案2】：

我自己今天刚好偶然发现了这个问题，所以我已经考虑了一段时间，但我想我刚刚找到了解决方案：

将padding-top: 40px; margin-top: -40px 添加到要跳转到的元素。负边距取消了内边距，但浏览器仍然认为元素的顶部比实际高 40px（因为实际上是这样，只是它的内容开始低）。

不幸的是，这可能会与已设置的边距和内边距发生冲突，如果您在目标元素上使用背景，它会搞砸一切。

我会看看我是否可以解决这个问题并发布一个 jsfiddle，但同时这里至少是一个基本答案:)

已编辑：我以为我有解决背景的方法，但没有奏效。再次删除。

最终编辑： 如果您知道包装元素的背景颜色，它会起作用。在我的示例中，我知道文本位于白色背景上，但标题具有银色背景。为了防止标题在我们设置的额外填充上具有背景，而是将它放在它之前的伪元素上：

#three:before  
    content: " ";
    background: white;
    display: block;
    margin-top: -40px;
    padding-top: 40px;

这样，额外的填充再次具有白色背景，但这仅在您已经知道它需要什么背景时才有效。例如，将其设置为透明将显示标题本身的底层背景，而不是文章的背景。

jsFiddle：http://jsfiddle.net/Lzve6/ 标题一是您遇到问题的默认标题。 标题二是我的第一个解决方案，保证适用于几乎所有浏览器 标题三使用了:before 伪元素，可能不适用于older browsers。

【讨论】：

这弄乱了我设置的其他边距和填充。目前我已经设置好了：#contact display:block; text-align:center; margin:0 auto; background-color:rgba(255, 255, 255, 0.15); width:auto; padding:15px; margin:15px;

有没有办法将我当前的边距和填充与您的编辑结合起来。类似margin:-40px 0px 0px 0px auto; padding:55px 15px 15px 15px;

当然可以，但是您必须手动添加它们。你的例子应该工作:)