javascript - 让 float 的 div 在到达另一个 div 时停止

Question

我在边栏上有一个随页面滚动的 float div。有没有办法添加代码，使其在到达页脚时停止？

查看实际代码:http://openbayou.staging.wpengine.com

用于 float div 的 jQuery 代码:

$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,
                });
            }

        }

    });
}
});

Answer 1

为什么不直接将侧边栏的 z-index 设置在页脚的 z-index 之后？

编辑:我不喜欢这个结果，所以我按照你想要的方式在 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});
                        }
                    }
                }               
            }
        });

我还通过获取标签云底部的位置并使用它代替您的硬编码数字，使其更加动态。