Question

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

请参阅操作代码：http://openbayou.staging.wpengine.com

用于浮动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});
                        }
                    }
                }               
            }
        });

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

Answer 2

好的，看了你最新的jsfiddle。我已修改该代码以与您合作。 http://jsfiddle.net/Tgm6Y/4430/这不会有动画滞后，应该适合你。

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

将#two替换为#foot和#pointFive替换为“#sidebar .sidebar-tag-cloud”，这应该适用于您的代码。

Answer 3

更新找到解决问题的方法。

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

这样做是在页脚之前停止，我可以配置停止点。

我感谢所有帮助解决我的问题！

到达另一个div时，让一个浮动的div停下来

3 个答案: