当用户滚动过去时更改 div css，使用 jQuery [英] Change div css when user scrolls past it, using jQuery

问题描述

当用户滚动经过 div 时，我需要将其 css 更改为 position:fixed.很像这里所做的:http://imakewebthings.com/jquery-waypoints/shortcuts/sticky-elements/ 但只有普通的 jquery，没有插件.
一旦用户滚动到另一个 div，该 div 也必须停止滚动.
例如:

When a user scrolls past a div I need it's css changed to position:fixed. Much like what is done here: http://imakewebthings.com/jquery-waypoints/shortcuts/sticky-elements/ but with just plain jquery, without the plugin.
The div must also stop scrolling once the user scrolls to another div.
For example:

<div id="stuff"></div>
<div id="this"></div>//must start scrolling with user when user reaches it.
<div id="footer"></div>// when #this reaches within say, 10px, of #footer it must stop in it's current position, in order to prevent overlap

我假设我会使用 .scroll() 和 .css()，但我不知道从哪里开始.

I'm assuming i'd use .scroll() and .css(), but I have no idea where to go from there.

推荐答案

我注意到在你的回答中 #this 一旦你进入 #footer 就会突然消失.我已经调整了您的答案，以允许 #this 坚持使用 #footer 并滚动更流畅.

I noticed in your answer #this disappears abruptly once you get down to #footer. I've tweaked your answer to allow for #this to stick to #footer and scroll which is a lot smoother.

我的演示使用的标记略有不同，而且有点冗长，因此请跳转到 jsFiddle 并查看.

My demo uses slightly different markup and is a little more verbose so jump over to jsFiddle and check it out.

这篇关于当用户滚动过去时更改 div css，使用 jQuery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！