javascript - 如何使图像部分滚动，然后保持固定，然后在通过某个部分时滚动？

Question

我什至不知道我想做什么会叫什么

请快速浏览一下这个页面:

http://www.philsalesses.com/plasma-pong/

您会在左侧看到标题 Plasma Pong 及其下方的图像。当我滚动文章时，我希望它在页面滚动时保持不动。但是，当您到达页面底部时，您会注意到有一个页脚，如果我将其完全静态化，则没有足够的空间容纳标题和图像。

我希望它保持不变，直到页脚点击，然后滚动。当您向上滚动页面时，它会滚动一点，直到有空间，然后再原地不动。同样的效果，但相反。知道我该怎么做吗？

Answer 1

将标题 css 位置设置为固定。然后使用 javascript 在满足某些条件时检测滚动事件将其重置为绝对位置，以便它保持在页脚上方。然后当页面滚动离开页脚时删除绝对定位。要查看工作示例，请访问 quirksmode.org。在他的文章中，他具有您正在寻找的效果。