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

Question

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

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

更新：本质上是对 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);

Answer 2

我知道这个问题很老了，但它出现在我的 Google 搜索中，让 div 停留在页面上进行滚动。这个解决方案工作得很好，并且在我的情况下不允许页面无限滚动，就像上面@Chris 的解决方案一样。

它需要在浮动 div 上方添加一个空 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;
}