如何創建scribd導航欄棒效果

Question

隨着jquery.waypoints插件，你可以輕鬆地創建粘元素。它sticky elements demo顯示導航欄是默認定位略低於頁面的頂部，然後用下列行爲： 一）爲用戶向下滾動和導航欄點擊視口的頂部那支有 B），當用戶滾動到頁面頂部，導航欄返回到其正常位置。

我試圖做類似的，但有些東西逆轉，這是因爲scribd導航欄完全相同的效果。從this scribd page的最底部開始，慢慢向上滾動以查看效果。

這是如何完成的？我假設航點會促進它。謝謝。

Answer 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; 
}