Javascript 使浮动div在到达另一个div时停止

我在侧边栏上有一个浮动的

div

，可以随页面滚动。有没有办法添加代码，使其在到达页脚时停止

请参阅运行中的代码：

jQuery代码用于浮动

div

：

$j=jQuery.noConflict();

$j(document).ready(function($) {

//this is the floating content
var $floatingbox = $('#one');

if($('#primary').length > 0){

    var bodyY = parseInt($('#primary').offset().top) - 20;
    var originalX = $floatingbox.css('margin-left');

    $(window).scroll(function () { 

        var scrollY = $(window).scrollTop();
        var isfixed = $floatingbox.css('position') == 'fixed';

        if($floatingbox.length > 0){

            $floatingbox.html();

            if ( scrollY > 1561 && !isfixed ) {
                $floatingbox.stop().css({
                    position: 'fixed',
                    top: 10,
                });
            } else if ( scrollY < 1561 && isfixed ) {
                $floatingbox.css({
                    position: 'relative',
                    top: 0,
                });
            }

        }

    });
}
});

$j=jQuery.noConflict（）；
$j（文档）.ready（函数（$）{
//这是浮动内容
var$floatingbox=$（“#一”）；
如果（$（“#主”）。长度>0）{
var bodyY=parseInt（$（'#primary'）.offset（）.top）-20；
var originalX=$floatingbox.css（'margin-left'）；
$（窗口）。滚动（函数（）{
var scrollY=$（window.scrollTop（）；
var isfixed=$floatingbox.css（'position'）=='fixed'；
如果（$floatingbox.length>0）{
$floatingbox.html（）；
如果（滚动>1561&&！已修复）{
$floatingbox.stop（）.css({
位置：'固定'，
前10名，
});
}else if（滚动<1561&&isfixed）{
$floatingbox.css({
位置：'相对'，
排名：0，
});
}
}
});
}
});

---

为什么不在页脚的z索引后面设置侧边栏的z索引

编辑：我不喜欢这样做的结果，所以我用jquery按照您想要的方式完成了这项工作

尝试以下滚动功能：

$(window).scroll(function () { 
floatingbox = $("#one");
            if(floatingbox.length > 0){
                //get our current scroll position
                var scrollY = $(window).scrollTop();
                //get the position of the tag cloud relative to the document
                var contentY = ($("#sidebar .sidebar-tag-cloud").offset().top + $("#sidebar .sidebar-tag-cloud").outerHeight(false));
                //calculate the largest possible top margin size before it starts to overlap the footer
                var lastY = $("#footer").offset().top - $("#one").outerHeight(false);
                //check if our scroll location is past the bottom of the tag cloud
                if ( scrollY > contentY )
                {
                    //check if the current top position is less than the maximum position
                    if(floatingbox.offset().top<lastY)
                    {
                        //keep scrolling
                        floatingbox.stop().animate({"marginTop":scrollY-contentY});
                    }else
                    {
                        //check if we have scrolled back up and have a space at the top
                        if(scrollY<floatingbox.offset().top)
                        {
                            floatingbox.stop().animate({"marginTop":scrollY-contentY});
                        }else
                        {
                            // hard set to the maximum position
                            floatingbox.stop().css({"marginTop":lastY-contentY});
                        }
                    }
                }               
            }
        });

$（窗口）。滚动（函数（）{
浮动框=$（“#一”）；
如果（floatingbox.length>0）{
//获取我们当前的滚动位置
var scrollY=$（window.scrollTop（）；
//获取标记云相对于文档的位置
var contentY=（$（“#sidebar.sidebar标记云”）.offset（）.top+$（“#sidebar.sidebar标记云”）.outerHeight（false））；
//在开始与页脚重叠之前，计算最大可能的上页边距大小
var lastY=$（“#footer”）.offset（）.top-$（“#one”）.outerHeight（false）；
//检查滚动位置是否超过标记云的底部
如果（滚动>内容）
{
//检查当前顶部位置是否小于最大位置
if（floatingbox.offset（）.top好的，在查看了最新的JSFIDLE之后。我已经修改了该代码以与您的代码一起使用。这不会有动画延迟，应该对您很好

$('#one').followTo('#two','#pointFive');

只需将#2替换为#footer，将#point five替换为“#sidebar.sidebar tag cloud”，这应该可以在代码中使用。
更新：找到了我的问题的解决方案

$(function () {
    var msie6 = $.browser == 'msie' && $.browser.version < 7;
    if (!msie6) {
        var top = $('#one').offset().top;
        $(window).scroll(function (event) {
            var y = $(this).scrollTop() + 20;
            if (y >= top) {
                $('#one').addClass('fixed');
            }
            else {
                $('#one').removeClass('fixed');
            }

            // don't overlap the footer - pull sidebar up using a negative margin
            footertotop = ($('#footer').position().top);
            scrolltop = $(document).scrollTop() + 760;
            difference = scrolltop - footertotop;
            if (scrolltop > footertotop) {
                $('#one').css('margin-top', 0 - difference);
            }

            else {
                $('#one').css('margin-top', 0);
            }
        });
    }
});

$（函数（）{
变量msie6=$.browser='msie'&&$.browser.version<7；
如果（！msie6）{
var top=$（'#one'）.offset（）.top；
$（窗口）。滚动（功能（事件）{
var y=$（this.scrollTop（）+20；
如果（y>=顶部）{
$（'one'）.addClass（'fixed'）；
}
否则{
$（“#一”）.removeClass（'fixed'）；
}
//不要重叠页脚-使用负边距向上拉侧边栏
footertotop=（$（'#footer'）.position（）.top）；
scrolltop=$（文档）.scrolltop（）+760；
差异=滚动顶部-页脚顶部；
如果（滚动顶部>页脚顶部）{
$（'#one'）.css（'margin-top'，0-差）；
}
否则{
$（'#one'）.css（'margin-top'，0）；
}
});
}
});

它的作用是在页脚之前停止，我可以配置停止点

我非常感谢大家帮助我解决问题！
这不是WordPress的问题，因此是离题的。不起作用。请记住，我不熟悉jQuery。有没有办法在用户到达页面末尾时添加一些东西来保持div保持在某个像素上？嗯，如果用此代码替换滚动代码，它会起什么作用？没有这意味着什么是无效的。什么都没有。Box不会滚动，css也不会更改。我已将上述代码添加到网站，以便您可以查看。已签出。看起来我忘记了复制粘贴设置floatingbox变量。进行了更改。尝试一下。仍然不行。有没有办法在stackoverflow上发送私人消息？