Question

我遇到的问题与下面的链接相同，其中存在粘性标题并且单击锚标记会导致锚点放置我在粘贴标题后面锚定的任何内容。我正在寻找这个问题的非JS解决方案。

我看了看： offsetting an html anchor to adjust for fixed header

和

HTML position:fixed page header and in-page anchors

所以在我的html中：

<a href="#first"> </a>

锚标记如下：

<a class="anchor" id="first"> </a>

然后在我的样式表中：

.anchor { display: block; position: relative; top: -100px;}

这不起作用（如在标题中一直阻止锚点）。所以我试过了：

a.anchor{ display: block; position: relative; top: -100px; visibility: hidden;}

从第一个链接逐字复制。

这也没用，所以我试过了：

.anchor{
    padding-top: 100px;
    margin-top: -100px;
 }

其他尝试：

.anchor {
   display: block;    
   position: relative;     
   top: -100px;
   visibility: hidden;
 }

 a.anchor {
    padding-top:600000px;
    height:0px;
 }

可以说，这也没有做任何事情。

我尝试将<a>代码更改为<spans>和<divs>。我尝试在<a>标记内添加文本，因为我读到某些浏览器不支持空锚标记的地方。

我目前正在使用Chrome，并且已经在Safari上进行了测试。我已经尝试清除缓存，以防出现问题。

显然，我的一个CSS规则：display：table-header-group;与填充规则冲突。现在我无法显示表格，但我可以将其填充到正确的位置。

Answer 1

您可以使用不间断的空间：

<a class="anchor" id="first">&nbsp;</a>

Answer 2

如果我理解你的问题，除了向#first添加填充之外，如果没有JS，你可能无法实现这一点。因此，在#first元素中添加padding-top，以便在标题覆盖之前滚动到停止位置。

很难说明这一点，但基本上当#first元素的顶部与页面顶部相遇时，页面将立即停止滚动，因此将#first元素内的内容推入将使其位于粘性标题下方。

Answer 3

显然问题是我的样式表中的CSS规则存在冲突。至于为什么（锚链甚至没有封装规则所指的表，所以我不知道）但是将规则改为表格修复了问题。

Answer 4

我使用:target伪元素扩展this method，这非常方便。

:target {
  margin-top: -30px;
  border-top: 60px solid transparent;
  background-clip: padding-box;
}

然后，您可以根据粘性标题的高度设置margin-top和border-top。

带锚标记的粘滞/固定标题 - 其他解决方案无效

4 个答案: