锚定到 div 以转到 div 上方的某个点以允许固定标题 [重复]

Posted 2023-02-22

【中文标题】锚定到 div 以转到 div 上方的某个点以允许固定标题 [重复]

【英文标题】：Anchor to a div to go to a point above the div to allow for fixed header [duplicate]

【发布时间】：2019-11-22 07:06:21

【问题描述】：

我的网站上有一个固定的标题，并试图锚定到页面上的不同部分。

页面将滚动到锚定 div 距屏幕顶部 0px 的位置，但是，使用固定标题这意味着锚定 div 的一半现在隐藏在其后面。

看这个例子：

#fixed
  position:fixed;
  top:0px;
  background-color:#333;

div
  width:100%;
  height:150px;
  border:1px solid #333;

nav
  margin-top:150px;

<div id="fixed"></div>
<nav>
<a href="#1">1</a>
<a href="#2">2</a>
<a href="#3">3</a>
<a href="#4">4</a>
<a href="#5">5</a>
</nav>
<div id="1">1</div>
<div id="2">2</div>
<div id="3">3</div>
<div id="4">4</div>
<div id="5">5</div>

我想知道的是，是否有一种方法可以锚定到我想去的 div 上方的像素点，这样当你点击链接时，它会滚动到该 div 低于固定值的点标题？

【问题讨论】：

将 padding-top 添加到 body 中，其值等于固定 header 的高度：body padding-top: 150px;

【参考方案1】：

编辑： 给每个 div 一个类，然后在这个类中添加以下 css：

.classname 
   padding-top: 150px;
   margin-top: -150px;

【讨论】：

您好，感谢您的回答，不幸的是，这不起作用，因为它仍会滚动到我想将 div 隐藏在标题后面的正文部分