Question

我们的想法是，当用户向下滚动页面时，用户可以滚动过去标题以使侧边栏“粘住”。

当它们靠近页面底部时，它应该计算出剩余多少空间以及侧边栏需要多少空间，并添加一些负边距以向上移动侧边栏，同时保持固定位置。

到这里一切正常。

接下来的问题是确保侧边栏仅向上移动，并且应该保持距离底部大约10个像素。通过这种方式，侧边栏将被固定，直到它需要向上移动以显示其内容，然后一旦显示它再次卡住从底部大约10个像素。

这是我试图实现这一目标的地方（请参阅完整代码的小提琴）：

if( $(window).scrollTop() > (documentHeight - sidebarHeight) ) {

        if( offsetBottom < 10) {

        }
        else {
            $('div.sidebar').stop(true,false);
            $('div.sidebar').animate({'margin-top':offset}, 300);
        }

    } else {
        $('div.sidebar').stop(true,true);
        $('div.sidebar').css({'margin-top':'0'});
    }

然而，边栏STILL在页面上移动太远...有人可以帮忙吗？我确定从底部算出偏差只是一个简单的错误。

Answer 1

我认为你有一个很好的尝试，除了我不确定那些动画在那里做什么。基本上你需要3次检查，首先看看是否在头部上方使用，第二次检查它们是否在侧边栏的标题和最底部限制之间，最后是否低于该点。然后根据需要简单地交换和更改类并修改最高值。

jsFiddle

var sidebarHeight = $('div.sidebar').height();
var documentHeight = $(document).height();
var headerHeight = $('div.header').height();

$(window).scroll(function() {
    var margin = 10;

    var sidebar_offset = documentHeight - sidebarHeight - (margin * 2); // double margin to account for top and bottom margins

    if ($(window).scrollTop() > headerHeight && $(window).scrollTop() < sidebar_offset ) {
        // below header, but above the sidebar offset limit
        $('div.sidebar').addClass('fixed');  
        $('div.sidebar').css('top', '');    
    }
    else if ( $(window).scrollTop() <= headerHeight ) {
        // above header
        $('div.sidebar').removeClass('fixed');
        $('div.sidebar').css('top', ''); 
    }
    else {
        // past the sidebar offset limit
        $('div.sidebar').removeClass('fixed');
        $('div.sidebar').css('top', documentHeight - sidebarHeight - margin);
    }
});

jQuery修复了侧边栏，如果溢出则随内容移动

1 个答案: