javascript - jQuery 固定侧边栏在溢出时随内容移动

Question

我有以下 fiddle :http://jsfiddle.net/yFjtt/1/

这个想法是，当用户进一步向下滚动页面时，可以滚动经过标题以使侧边栏“粘”在适当的位置。

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

到目前为止，一切正常。

下一个问题是确保侧边栏只向上移动到需要的位置，并且与底部保持大约 10 像素的距离。这样，侧边栏将被固定，直到它需要向上移动以显示其内容，然后一旦全部显示，就会再次卡在距底部约 10 像素的位置。

这是我尝试实现此目标的地方(请参阅 fiddle 以获取完整代码):

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'});
    }

但是侧边栏仍然在页面上移动得太远...有人可以帮忙吗？我确信这只是计算底部偏移量时的一个简单错误。

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);
    }
});​