0

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

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

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

        }

    });
}
});

4

3 回答 3

0

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

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

只需将#two 替换为#footer 并将#pointFive 替换为“#sidebar .sidebar-tag-cloud”，这应该可以在您的代码中使用。

于 2013-04-26T00:23:30.013 回答
0

为什么不将侧边栏的 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});
                        }
                    }
                }               
            }
        });

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

于 2013-04-25T00:42:28.007 回答
0

更新：找到了我的问题的解决方案。

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

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

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

于 2013-04-26T01:11:32.303 回答