当用户使用jQuery滚动时,更改div css [英] 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也必须停止滚动。
例如:
< div id =stuff>< / div>
< div id =this>< / div> //必须在用户到达时开始用户滚动。
< div id =footer>< / div> //当#this达到#footer的10px时,它必须停在当前位置,以防止重叠
我假设我会使用 .scroll()
和 .css()
,但我不知道该从哪里去。 我注意到你的回答 #this
突然消失,一旦你回到 #footer
。我调整了答案,允许 #this
坚持 #footer
,并且滚动更顺畅。
我的演示使用稍微不同的标记,稍微冗长些,所以跳转到jsFiddle并检查出来。
< h2> 演示: jsfiddle.net/Marcel/e9hyw/
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
I'm assuming i'd use .scroll()
and .css()
, but I have no idea where to go from there.
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.
My demo uses slightly different markup and is a little more verbose so jump over to jsFiddle and check it out.
Demo: jsfiddle.net/Marcel/e9hyw/
这篇关于当用户使用jQuery滚动时,更改div css的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!