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

Question

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

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

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

Answer 1

我知道这很老了,但在试图找到我自己的解决方案时偶然发现了这一点

此链接显示了如何以非常轻量级的方式执行此操作.基本上你需要的是以下代码(当然还有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);