当用户滚动过去时更改 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屋!