更改DIV + CSS当用户滚动经过它，使用jQuery(Change div css when u

当用户滚动经过一个div我需要的CSS改变位置：固定的。 就像什么都在这里完成： http://imakewebthings.com/jquery-waypoints/shortcuts/sticky-elements/但只是普通的jQuery的，没有插件。
在div也必须停止滚动，一旦用户滚动到另一格。
例如：

<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()但我不知道从哪里里去。

Answer 1:

我在你的答案注意到#this消失，突然一次你到#footer 。 我已经优化了你的答案允许#this坚持#footer ，滚动是顺畅了很多。

我演示使用略有不同的标记，是一个小更详细所以跳过来的jsfiddle和检查出来。

演示： jsfiddle.net/Marcel/e9hyw/

Answer 2:

这是最终为我工作：

    jQuery(document).ready(function() {
    var topOfrel = jQuery("#this").offset().top;
    var topOffooter = jQuery("#footer").offset().top - jQuery(window).height(); 
    var topOffootero = topOffooter ;
    var boxheight = jQuery(window).height() - 130;//adjusting for position below
    jQuery(window).scroll(function() {
        var topOfWindow = jQuery(window).scrollTop();
        if (topOfrel < topOfWindow && topOffooter > topOfWindow) {
            jQuery("#this").css("position", "fixed").css("top", "130px").css("overflow","auto").css("height", boxheight + "px");

        } else {
            jQuery("#this").css("position", "static");
        }
    });
});

Answer 3:

您引用的页面使用jQuery的：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js">

并且还具有其他JavaScript列入它，我们没有看到

顺便说一句，你可以在这里查看：

http://imakewebthings.com/jquery-waypoints/waypoints.js
http://imakewebthings.com/jquery-waypoints/shortcuts/sticky-elements/waypoints-sticky.js

他使用的功能都可以看到，但我不会说这是一个快速的答案。 根据他的剧本，他重视的侦听器的页面加载后的元素：

<script type="text/javascript">
    $(document).ready(function() {
        $('.my-sticky-element').waypoint('sticky');
    });
</script>

如果您有具体的问题问了，但我怀疑很多人会经历说明你的整个脚本。

文章来源: Change div css when user scrolls past it, using jQuery