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

});

帮助滚动/关注侧栏

1 个答案: