1

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

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

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

4

2 回答 2

8

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

此链接显示了如何以非常轻量级的方式进行操作。基本上您只需要以下代码（当然还有加载的 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);
于 2011-02-02T22:53:34.330 回答
3

我知道这个问题很老，但它出现在我的谷歌搜索中，让 div 留在页面上进行滚动。该解决方案效果很好，并且在我的情况下不允许页面无限滚动，就像上面@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;
}
于 2013-07-02T14:54:05.970 回答