jQuery滚动/关注侧边栏(div)

时间:2013-08-01 18:45:45

标签: jquery scroll sidebar

将jquery技术用于Help with Scroll/Follow Sidebar

的滚动/后续侧边栏
$(function() {
    var $sidebar   = $(".sidebar"),
        $window    = $(window),
        $footer    = $(".footer"), // use your footer ID here
        offset     = $sidebar.offset(),
        foffset    = $footer.offset(),
        threshold  = foffset.top - $sidebar.height(), // may need to tweak
        topPadding = 15;

    $window.scroll(function() {
        if ($window.scrollTop() > threshold) {
            $sidebar.stop().animate({
                marginTop: threshold
            });
        } else if ($window.scrollTop() > offset.top) {
            $sidebar.stop().animate({
                marginTop: $window.scrollTop() - offset.top + topPadding
            });
        } else {
            $sidebar.stop().animate({
                marginTop: 0
            });
        }
    });
});

唯一的问题是,当侧边栏(.sidebar)到达页脚(.footer)时,它会将页脚几乎推到页脚的高度。 如果页脚的高度是200px,侧边栏将页脚推到~200px(Internet Explorer),〜50px(Firefox,Chrome,Opera),然后显示页脚。内容和页脚之间的200px空白空间是我真正的问题。<登记/> 我希望侧边栏停止滚动页脚开始的确切位置。

3 个答案:

答案 0 :(得分:2)

也许代码更清晰:

$(function() {
    var $sidebar   = $("#sidebar"), 
        $window    = $(window),
        offset     = $sidebar.offset(),
        topPadding = 15;

    $window.scroll(function() {
        if ($window.scrollTop() > offset.top) {
            $sidebar.stop().animate({
                marginTop: $window.scrollTop() - offset.top + topPadding
            }, 400);
        } else {
            $sidebar.stop().animate({
                marginTop: 0
            }, 400);
        }
    });
});

您可以将400更改为其他值以更改动画的持续时间(将其设置为0,让侧边栏“不要”设置动画)。

答案 1 :(得分:1)

 threshold = foffset.top - $sidebar.height() - offset.top

答案 2 :(得分:0)

这个问题太旧了,在我读完其他答案后,我为我的案子做了这个。我希望这对以后的人有所帮助。

$(function() {
var $sidebar   = $("#sidebar"), 
$window    = $(window),
offset     = $sidebar.offset(),
topPadding = 15;
$window.scroll(function() {
if ($window.scrollTop() > offset.top) {
    if (($window.scrollTop())> ($("#following").offset().top + $("#following").height() - $sidebar.height())) {
        ;
    } else {
        $sidebar.stop().animate({
            marginTop: $window.scrollTop() - offset.top + topPadding
        }, 400);
    }

} else {
    $sidebar.stop().animate({
        marginTop: 0
    }, 400);
}
});
});

see picture