固定页头重叠页内锚

如果我在HTML页面中有一个非滚动头，固定在顶部，有一个定义的高度:

是否有一种方法可以使用URL锚(#fragment部分)让浏览器滚动到页面中的某一点，但仍然尊重固定元素的高度，而不需要JavaScript的帮助?

http://example.com/#bar

WRONG (but the common behavior):         CORRECT:
+---------------------------------+      +---------------------------------+
| BAR///////////////////// header |      | //////////////////////// header |
+---------------------------------+      +---------------------------------+
| Here is the rest of the Text    |      | BAR                             |
| ...                             |      |                                 |
| ...                             |      | Here is the rest of the Text    |
| ...                             |      | ...                             |
+---------------------------------+      +---------------------------------+

当前回答

我没有看到简单地使用:target作为一个选项列出。我发现

:目标{margin-top: -100px;padding-top: 100 px;｝

似乎在提供的场景中工作。:target也兼容所有现代浏览器。https://caniuse.com/?search=%3Atarget

2021-12-17 18:29:30

其他回答

我发现我必须同时使用muttenxd和Badabam的CSS解决方案，因为第一个在Chrome中不起作用，第二个在Firefox中不起作用:

a.anchor { 
  padding-top: 90px;
}

a.anchor:before { 
  display: block;
  content: "";
  height: 90px;
  margin-top: -90px;
}

<a class="anchor" name="shipping"></a><h2>Shipping (United States)</h2>
...

2016-05-24 00:12:14

使用:before实现的效果很好，直到我们意识到伪元素实际上覆盖和阻塞了伪元素区域内的指针事件。使用类似pointer-events: none的东西在:before上甚至直接在锚上都没有影响。

我们最终所做的是使锚的定位是绝对的，然后调整它的位置为偏移/高度的固定区域。

偏移锚没有阻塞指针事件

.section-marker {

    position: absolute;
    top: -300px;
}

这里的值是我们不会阻塞300px范围内的任何元素。缺点是，从Javascript中获取元素的位置需要考虑偏移量，因此任何逻辑都必须进行调整。

2017-02-16 23:03:48

这对我来说很管用:

HTML链接到锚点:

<a href="#security">SECURITY</a>

HTML锚:

<a name="security" class="anchor"></a>

CSS:

.anchor::before {
    content: "";
    display: block;
    margin-top: -50px;
    position: absolute;
}

2017-05-28 21:49:46

我也有同样的问题。我通过向锚元素添加一个类来解决这个问题，并将topbar高度作为padding-top值。

<h1><a class="anchor" name="barlink">Bar</a></h1>

我使用这样的CSS:

.anchor { padding-top: 90px; }

2012-10-29 07:52:47

我需要一些东西，适用于入站链接，页面上的链接，并可以通过JS的目标，以便页面可以响应头部高度的变化

HTML

<ul>
  <li><a href="#ft_who">Who?</a></li>
  <li><a href="#ft_what">What?</a></li>
  <li><a href="#ft_when">When?</a></li>
</ul>
...
<h2 id="ft_who" class="fragment-target">Who?</h2> 
...
<a href="#">Can I be clicked?</a>
<h2 id="ft_what" class="fragment-target">What?</h2>
...
<h2 id="ft_when" class="fragment-target">When?</h2>

CSS

.fragment-target {
    display: block;
    margin-top: -HEADER_HEIGHTpx;
    padding-top: HEADER_HEIGHTpx;
    z-index: -1;
}

z-index: -1允许片段目标上方“填充区域”中的链接仍然是可点击的，正如@MuttenXd在他的回答中所评论的那样

我还没有在IE 11、Edge 15+、Chrome 38+、FF 52+或Safari 9.1+中发现问题

2019-03-06 18:38:44

固定页头重叠页内锚

推荐文章

最新文章

标签