滚动时编辑 Div（就像在 google 文档中一样）

基本上，我想编写一些在 Google 文档主页中看到的代码。

当你打开它时，它有模板部分，然后是组织部分等， 但是当您滚动经过组织部分时（当由任何人拥有、日期、a 到 z 时），它会手动将自身添加到导航栏并添加一个框阴影。

Before https://i.stack.imgur.com/fAFH7.png

After https://i.stack.imgur.com/v6g4W.png

我考虑过使用eventListener like:

window.addEventListener('scroll', () => {
    console.log("Page is being scrolled")
}

但我无法测量用户是否在页面上滚动了特定数量的像素。有什么方法可以检查吗？

您只需在用户滚动时添加一个侦听器，然后如果用户滚动了一定数量的像素，则执行某些操作。

window.addEventListener('scroll', () => {
    console.log("scrolled")
}

现在，当滚动时，文本“滚动”将记录在控制台中。所以现在我们需要添加一个 if 语句，检查您是否已向下滚动页面一定的距离，这是以像素为单位计算的。

window.addEventListener('scroll', () => {
    if (document.body.scrollTop > 50 {
        console.log("User Scrolled past 50pixels
    }
}

现在，当您向下滚动页面 50px 时，控制台将记录它。因此，当您向下滚动到导航栏时，您只需更改导航栏的 css 代码，使其在顶部有一个固定位置，当您滚动到 50px 以上时，请删除该 CSS。

window.addEventListener('scroll', () => {
    if (document.body.scrollTop > 50 {
        // Make the div fixed here
    } else {
        // Remove the css making the div fixed
    }
}

当然，50 可以更改为您喜欢的任何数字。 例如，在 Google Docs 上，当您向下滚动约 205px 时，它会使导航固定...

希望这可以帮助！