Question

我正在尝试找到一个scriptaculous脚本（或创建一个），使我的视口中的垂直导航栏“粘滞”。虽然这可能不是黑魔法（可以使用位置：固定css）但这种方法存在问题：如果导航栏比视口高度长，则访问者将无法看到整个导航。所以我希望导航栏不要将视口保留在顶部，但不要将父容器留在底部。它应该立即跟随滚动事件，而不用花哨/弹跳动画。

这可能吗？谷歌透露没有什么对我有用。你可能会从slashdot的文章评论导航器或谷歌视频的播放器框中知道这种效果。

更新：基本上这将是jQuery插件scrollFollow的重写。如果它缺少动画就没问题，因为我不会使用它们。但它应该能够保持在定义的父容器内而不会剪切。不需要cookie处理。

Answer 1

我知道这很老了，但在试图找到我自己的解决方案时偶然发现了这个问题

这个link展示了如何以非常轻量级的方式完成它。基本上你只需要下面的代码（当然还有jQuery加载）

$(function() {
    var $sidebar   = $("#siderbar"),
        $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
            });
        }
    });
})

如果你不想让它动画，只需简单地替换动画部分：

$sidebar.stop().animate({ marginTop: VALUE });

与

$sidebar.css("marginTop", VALUE);

Answer 2

我知道这个问题已经过时但是我的谷歌搜索中出现了在页面上停留以进行滚动的问题。这个解决方案非常有效，并且不允许页面在我的情况下有无限滚动，就像上面@Chris的解决方案一样。

它需要在浮动div上方添加一个空div <div id="sticky-anchor"></div>作为锚点。

在此示例中，div需要id="sticky"

解决方案： http://blog.yjl.im/2010/01/stick-div-at-top-after-scrolling.html

使用Javascript：

function sticky_relocate() {
    var window_top = $(window).scrollTop();
    var div_top = $('#sticky-anchor').offset().top;
    if (window_top > div_top) {
        $('#sticky').addClass('stick');
    } else {
        $('#sticky').removeClass('stick');
    }
}

$(function () {
    $(window).scroll(sticky_relocate);
    sticky_relocate();
});

CSS：

#sticky.stick {
    position: fixed;
    top: 0;
    z-index: 10000;
}

滚动时将div保持在视口或任意div内

2 个答案: