帮助滚动/关注侧栏

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

});