jquery - 滚动/跟随侧边栏帮助

Question

使用 jquery 技术从 css-tricks.com 获得滚动/跟随侧边栏，如果您不知道我在说什么，这里是代码:

$(function() {

        var $sidebar   = $("#scroll-menu"),
            $window    = $(window),
            offset     = $sidebar.offset(),
            topPadding = 15;

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

    });

这里还有链接 http://css-tricks.com/scrollfollow-sidebar/

我遇到的唯一问题是它有一个容器，但是当您滚动到页脚足够远时，侧边栏会滚动出容器。有没有办法限制它向下滚动的距离？

这是正在发生的事情的图像: http://tinypic.com/r/2mcj2mv/7

提前致谢

Answer 1

您只需要添加一个额外的条件语句，如果 $(window).scrollTop() 大于某个阈值，则该语句不执行任何操作。问题在于设置该阈值，因为我假设您希望它在不同高度的页面上工作。幸运的是，我们可以使用页脚的偏移量和侧边栏的高度来确定这个阈值。以下内容可能需要根据您的具体情况进行一些调整，但基本上是:

$(function() {

    var $sidebar   = $("#scroll-menu"),
        $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
            });
        }
    });

});