更改内部链接向下滚动页面的距离

Question

嗨我有一个导航菜单，一旦向下滚动页面一定数量的像素就会变为固定。 因为菜单是固定的，所以它覆盖了顶部切割出该部分的标题。

我希望在使用菜单移动到页面上的某个部分时影响页面移动的距离，所以如果可能的话，对页面向下滚动以显示所有菜单以及节标题的负面偏差。

谢谢！

Answer 1

我遇到过这个问题并提出了以下解决方案：

<nav class="fixed">
  <a href="#about">About</a>
  ...
</nav>

...

<div id="about" class="anchor-helper"></div>
<div class="container-i-actually-want-to-see>
  <!-- your content goes here -->
</div>

在CSS中：

nav {
  height: 50px;
}

.anchor-helper {
  position: relative;
  top: -50px; /* however tall your nav is, you want this to be negative that amount */
}

我喜欢这个解决方案的是它尽可能地依赖CSS并且只使用javascript进行平滑滚动。如果有人导航到http://your-site.com/example-page#about，他们就会到达您希望的位置。