0

我有以下小提琴：http: //jsfiddle.net/yFjtt/1/

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

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

到这里为止一切正常。

下一个问题是确保侧边栏只向上移动到它需要的距离，并且应该保持距离底部大约 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'});
    }

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

4

1 回答 1

2

我认为您进行了一次很好的尝试，但我不确定这些动画在那里做什么。基本上你需要 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);
    }
});​
于 2012-11-21T18:01:47.450 回答