4

我在此处和此处的帖子中看到了该主题，但它们并没有真正帮助我。但情况非常相似：滚动页面和页面顶部的粘性菜单栏（固定 div），锚点分散在长滚动文本中。

像这样的HTML：

<a name="hd1" class="anchor"><h1>Heading Foo</h1></a>
<p>this is some text, and a lot of it
...
<a href="#hd1">jump to Heading Foo</a>
...
<a name="hdx" class="anchor"><h1>Heading Bla</h1></a>
<p>and then there is more text
...
<a href="#hdx">jump to Heading Bla</a>    
...

有一些 CSS 目前是空的，因为我仍然只是偶然发现了这个问题

.anchor {
  color: green;
} ​

看看这个小提琴，看看它现在是如何工作的。

现在，每当我单击链接时，它都会将我带到锚点。（耶！）唉，这也意味着现在位于页面顶部的锚点被粘性菜单覆盖。（不！）如果它会显示在粘性菜单下方，那就太好了。

我已经尝试了其他帖子中给出的解决方案，但无济于事。例如，在锚点周围添加填充实际上会在文本中添加可见的填充并创建空白空间；这不是我想要的。文本应该在视觉上看起来未修改。

提前感谢您的提示和提示:-)

编辑：我应该让它更清楚一点。我不需要页面顶部的空间。我确实需要每个锚点都位于菜单栏下方。试试我原来的小提琴，然后单击锚点：您将看到它们是如何定位的，以便它们被菜单栏覆盖。

4

6 回答 6

1

如何为第一个 h1 设置填充？

​h1:first-child {
    padding-top:50px;
}
于 2012-11-09T08:19:55.327 回答
1

感谢您的输入，我根据此讨论找到了一个可行的解决方案。那里的提示是“空锚”；在我原来的小提琴上，锚点包围了标题，这使我无法定位锚点。

更改为空锚

<a name="hdx" class="anchor">&nbsp;</a><h1>Heading Bla</h1>

允许我在不影响任何（可见）文本流的情况下移动页面上的锚点。所以锚的 CSS 现在变成了

.anchor {
  position: relative;
  top: -35px;  /* depending on the size of the sticky menu */
}

这样，标题的锚点位于标题上方，并且跳转到该锚点会导致标题显示在菜单栏下方。

我已经更新了小提琴以正常工作。（两件事：锚使用 A1，.. 文本来显示它们的位置，但你可以清空它们。另外，我必须明确关闭<p>标签以确保“位置：相对”工作正常。）

于 2012-11-09T18:18:34.367 回答
0

添加额外的一类并设置该边距顶部值

html

<div id="menu">Menu</div>
 <div class="nontop">
  //-- some thing here
</div>

CSS

.nontop {
margin-top: 50px;
}

这里是 Deml：小提琴

于 2012-11-09T08:40:04.167 回答
0

创建一个容器 div 来保存其余数据并设置 padding-top:50px;

CSS: #contents{ padding-top:50px;/* 菜单高度 */ }

HTML：

<div id="menu">Menu</div>
<div id="contents">
<!-- data goes here -->
</div>
于 2012-11-09T08:32:44.577 回答
0

使用 Javascript 并将window.scrollTo页面滚动到您想去的地方怎么样？您可以找到offsetTop元素的，然后滚动到当前scrollX和 offsetTop + 标题有多高？

于 2012-11-09T08:34:35.057 回答
0

现场演示 想做这样的事情。

创建一个 div 并margin-top:50px;保持所有都在容器 div 中，除了菜单 div。

于 2012-11-09T09:05:34.380 回答