如何创建 scribd 导航栏棒效果答案

【问题标题】：how to create the scribd navbar stick effect如何创建 scribd 导航栏棒效果
【发布时间】：2011-12-13 09:45:34
【问题描述】：

使用jquery.waypoints 插件，您可以轻松创建粘性元素。它的sticky elements demo 显示了一个导航栏，默认情况下该导航栏位于页面顶部下方，然后具有以下行为： a) 当用户向下滚动并且导航栏到达视口的顶部时，它会停留在那里 b) 当用户向上滚动到页面顶部时，导航栏返回到其正常位置。

我正在尝试做一些类似但有些相反的事情，这与 scribd 导航栏的效果完全相同。从this scribd page的最底部开始，慢慢向上滚动查看效果。

这是怎么做到的？我假设航点会促进它。谢谢。

【问题讨论】：

标签： jquery-plugins scroll scribd jquery-waypoints

【解决方案1】：

这是我想出的一个解决方案，但仍然对其他实现感兴趣。

js:

//#bottomOfEl is the element you want to stick to the bottom of
$("#bottomOfEl").waypoint(function(ev, dir){ 
    $("#navbar").toggleClass('sticky', dir === "up");
    ev.stopPropagation();
}, {
    offset: function() {return $.waypoints('viewportHeight') 
                                - $(this).height() 
                                - $("#navbar").height();
            } 
})

css:

#navbar {
    height: 40px;
    width: 500px;
    z-index: 10;
}
.sticky { 
    position: fixed;
    bottom: 0px;
}

【讨论】：