Question

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

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

我想确保，当页面滚动到特定锚点时（是由于单击页面上指向#bottom的链接，或将哈希片段手动添加到URL，或跟随重定向）），标头不会妨碍锚定。

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

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

我如何以一种健壮的方式确保导航到锚点元素的所有滚动都偏移标题的高度（如果可见），从而使内容出现在正确的位置？

我尝试过的一种方法是在检测到hashchange时立即取消固定标头，例如：

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

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

_{在<a>元素上添加点击侦听器是 not 健壮的，因为对于到达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>

偏移文档内锚点的固定位置标头

0 个答案: