javascript - 向下滚动页面后出现的标题

Question

我想创建一个在向下滚动后显示的辅助标题(当我的实际标题消失时)。我尝试了一个名为“Headhesive”的 jquery 插件，但没有成功。这就是我要的 https://markgoodyear.com/labs/headhesive这里当主标题消失时，第二个标题出现，这是固定的。

Answer 1

我不会为您写出所有代码，但这可能会让您了解如何实现您想要的。

• 向文档正文添加一个 scroll 事件监听器。
• 检查文档是否滚动到某个点
• 如果文档滚动到某个点，隐藏“第一个”标题，并显示“第二个”标题。

第二个 header 可以简单地包含 0px 的 top 和 left 的 CSS，以及 position absolute , 使页眉出现在页面顶部。

监听滚动位置的例子:

document.addEventListener('scroll', onScroll);

function onScroll () {
    var scrollPosition = window.scrollY,
        showHeaderPosition = 100;

    // Determine if position is at a certain point
    if (scrollPosition >= showHeaderPosition) {
        showHeader();
    } else {
        hideHeader();
    }
}