Question

所以，我正在一个网站上工作，并且有一个粘性导航栏。我想要它，这样每当我点击我的导航栏时，它将转到id然后向后滚动导航栏的高度。无论如何我能做到吗？

Answer 1

仅使用HTML和CSS，您可以通过以下方式执行此操作：

在您想要链接的每个部分/ DIV的最开始处，创建另一个具有自己的ID，绝对位置和负top设置的DIV，该设置等于并补偿导航栏的高度。 a标记与这些元素相关联。父DIV具有position: relative非常重要。 “辅助”链接DIV（具有position: absolute的DIV）对用户仍然不可见：

html,
body {
  margin: 0;
}

nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 80px;
  background: #fca;
  z-index: 2;
}

nav a {
  padding: 5px 15px;
}

div {
  position: relative;
  height: 500px;
}

#div0 {
  margin-top: 80px;
  background: #ffd;
}

#divA,
#divB {
  position: absolute;
  top: -80px;
}

#div1 {
  background: #dff;
}

#div2 {
  background: #fdf;
}

<nav>
  <a href="#divA">To DIV1</a>
  <a href="#divB">To DIV2</a>
</nav>
<div id="div0">
  This is the top of DIV0
</div>
<div id="div1">
  <div id="divA"></div>
  This is the top of DIV1
</div>
<div id="div2">
  <div id="divB"></div>
  This is the top of DIV2
</div>

P.S。：这是将页面移动到正确位置的部分，尽管您使用了固定的导航栏。如果你想实现动画滚动，你需要Javascript / jQuery - 没办法...但是有插件可以帮助你做这种事情，例如“Scrollmagic”

HTML：href to div然后减去粘性导航栏的高度

1 个答案: