javascript - 锚定到 div 以转到 div 上方的点以允许固定标题

标签 javascript jquery html css

<分区>

我的网站上有一个固定的 header ,我试图锚定到页面上的不同部分。

页面将滚动到锚定 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 低于固定位置的点标题?

最佳答案

编辑: 给每个 div 一个类,然后将以下 css 添加到这个类中:

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

关于javascript - 锚定到 div 以转到 div 上方的点以允许固定标题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57008230/

上一篇:javascript - 在任何地方关闭 sldenav 覆盖

下一篇:javascript - 从槽范围获取数据

相关文章:

javascript - 在 Electron 中写入 "appData"中的文件。在哪里添加 import { app } from "electron";?

javascript - 使用 jQuery 缩放相对于用户屏幕大小的图像

javascript - 对当前和 future 的元素运行匿名函数?

html - 如何在 en amil(电子邮件 html)上将图标列表居中

javascript - 在闭包内中断 for 循环

javascript - 使用 jQuery,我如何将文本 ajax 加载到多个 .classes 而不是 #id 中?

jquery - 在一页中创建多个 slider

html - 样式表不适用于 HTML?

c# - 使用 Asp.net 的国际象棋引擎

php - 干净的 javascript 注释类型//的正则表达式