jQuery 滚动/跟随侧边栏 (div)答案

【问题标题】：jQuery scroll/follow sidebar (div)jQuery 滚动/跟随侧边栏 (div)
【发布时间】：2013-08-01 18:45:44
【问题描述】：

使用 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) 时，它会将页脚向下推到接近页脚的高度。
如果页脚的高度为 200 像素，侧边栏将页脚推到 ~200 像素（Internet Explorer）、~50 像素（Firefox、Chrome、Opera）然后显示页脚。
内容和页脚之间的 200 像素空白是我真正的问题。
我希望边栏在页脚开始的位置停止滚动。

【问题讨论】：

所以你需要让你的脚本从窗口高度计算中减去页脚的高度.....
试试threshold = foffset.top - $sidebar.height() - offset.top
@Vicky 成功了，谢谢
@Ashish 额外的滚动是因为你的侧边栏的顶部位置，上面的代码从滚动高度中删除了它

标签： jquery scroll sidebar

【解决方案1】：

也许代码更简洁：

$(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，让侧边栏“不”动画）。

【讨论】：

【解决方案2】：

试试

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

【讨论】：

【解决方案3】：

这个问题太老了，在我阅读了其他答案后，我为我的情况做了这个。我希望这对后来的人有所帮助。

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

【讨论】：