javascript - 偏移文档内锚链接的固定位置标题

Question

我有一个使用以下内容的页面：

• Headroom.js 用于“向下滚动时滑出视图并在向上滚动时滑回”的标题
• <a>内部部分的HTML链接
• 平滑滚动

我想确保，当页面滚动到特定锚点时（由于单击页面上的链接，例如#bottom，或手动将哈希片段添加到 URL，或遵循重定向），标题不会得到在锚的方式。

您可以在下面的代码段中重现我正在谈论的有问题的行为。单击锚点跳转到页面底部，然后单击链接跳转回顶部。

请注意，标题覆盖了浏览器滚动到的内容。

我如何以稳健的方式确保由于导航到锚元素而导致的任何滚动都被标题的高度（如果可见）偏移，以便内容出现在正确的位置？

我尝试过的一种方法是在检测到哈希更改后立即取消固定标头，例如：

$(window).on('hashchange',function(){
    setTimeout(() => {
        headroom.unpin();
    }, 0);
});

但是为了平滑滚动，hashchange 事件会在滚动完成之前触发。因此标题会立即被重新固定。我也看不到任何方法来检测平滑滚动何时完成。

_{<a>在元素上添加点击侦听器并不可靠，因为对于到达 URL 中已经存在哈希片段的页面的用户来说，它会失败。JavaScript 对window.location.hash. 同样，监听 hashchange 事件也是不可靠的，因为如果用户单击锚点、滚动离开然后再次单击同一个锚点，它不会触发。}

document.addEventListener("DOMContentLoaded", function(e) {
  var headroom = new Headroom(document.querySelector(".header"), {
    "offset": 205,
    "tolerance": 5,
    "classes": {
      "initial": "animated",
      "pinned": "slideDown",
      "unpinned": "slideUp"
    }
  });
  headroom.init();
});

html {
  scroll-behavior: smooth;
}

.header {
  position: fixed;
  z-index: 10;
  right: 0;
  left: 0;
  top: 0;
  background-color: #292f36;
  color: white;
  text-align: center;
  padding: 2rem 0;
}

p:nth-of-type(1) {
  margin-top: 7rem;
}

body {
  font-family: sans-serif;
}

.header {
  animation-duration: 0.5s;
  animation-fill-mode: both;
  will-change: transform, opacity;
}

@keyframes slideDown {
  0% {
    transform: translateY(-100%)
  }
  100% {
    transform: translateY(0)
  }
}

.slideDown {
  animation-name: slideDown;
}

@keyframes slideUp {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-100%);
  }
}

.slideUp {
  animation-name: slideUp;
}

<script src="https://npmcdn.com/headroom.js/dist/headroom.min.js"></script>
<div class="header">Here is my header</div>
<p id="top">Here is some text. Click to <a href="#bottom">jump</a> to the bottom of the page.</p>
<ul>
  <li>Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.</li>
  <li>Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.</li>
  <li>Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.</li>
  <li>Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</li>
</ul>

<ul>
  <li>Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.</li>
  <li>Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.</li>
  <li>Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.</li>
  <li>Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</li>
</ul>
<ul>
  <li>Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.</li>
  <li>Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.</li>
  <li>Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.</li>
  <li>Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</li>
</ul>
<ul>
  <li>Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.</li>
  <li>Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.</li>
  <li>Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.</li>
  <li>Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</li>
</ul>
<ul>
  <li>Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.</li>
  <li>Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.</li>
  <li>Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.</li>
  <li>Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</li>
</ul>
<ul>
  <li>Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.</li>
  <li>Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.</li>
  <li>Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.</li>
  <li>Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</li>
</ul>

<p id="bottom">Here is some more text. Click to <a href="#top">jump</a> to the top of the page.</p>

标签： javascripthtmlcsssmooth-scrollingheadroom.js