html - 如何防止在 div 内滚动直到完全可见

Question

我有一个页眉为 100vh 的单页网站。现在，当您向下滚动时，我希望页眉底部保留在页面顶部。我的想法是在标题下创建一个高度为 90vh 的部分(标题底部剩余的 10vh)。

但我的问题是，当光标在该部分上时，浏览器将在该部分内滚动，并且在覆盖 90vh 之前不会完全向下滚动该部分。那么有没有办法先向下滚动页面，然后再滚动到该部分内？

一些代码来说明:

header {
  background-image(...);
  height: 100vh;
}

section {
  height: 90vh;
}

<header>
  some text
</header>

<section>
  some info here
</section>

Answer 1

我不确定我是否理解正确，但这可能会导致您:

$(document).scroll(function() {
if ($(document).scrollTop() > 64) {
    $("#menu").css({
        "position": "fixed",
        "top": "0px"
    });
} else {
    $("#menu").css({
        "position": "absolute",
        "top": "64px"
    });
}
});

这也使用了 jQuery，但我认为它是可读的，它显示了我刚从我的元素中复制的解决方案

这是一个工作演示:https://jsfiddle.net/nooorz24/L9pr8sj9/6/