1

使用 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

提前致谢

4

1 回答 1

9

您只需要添加一个额外的条件语句，如果$(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
            });
        }
    });

});
于 2011-01-17T20:13:47.937 回答