如何創建滾動到粘滯導航欄的標題？

Question

我想創建一個包含圖形/圖像的標題，當用戶向下滾動查看頁面內容時，標題從底部開始，然後變爲固定在屏幕頂部。

下面是一個例子：http://www.thinkful.com/learn/javascript-best-practices-1/

我將如何創建呢？

Answer 1

我已經使用了jQuery Waypoint（http://imakewebthings.com/jquery-waypoints/），並取得了很多成功。

Answer 2

通過檢查scrollTop()。你可以很容易地搜索到這一點。 How to build simple sticky navigation with jQuery?

Answer 3

使用jQuery：

1. 隨着$(window).on('scroll',function(){ /*your code*/ });可以 綁定到滾動事件的功能。

2. 內部的功能使用document.scrollTop知道滾動條

3. 更改標題的css和側面菜單與.css()或.addClass()

4. 最後與HTML5 History API您的當前 垂直位置可以使用history.replaceState()方法更改網址 而不加載頁面。

我剛分叉一個名爲Scrollit.js的插件來完成這項工作。 original version from Chris Polis效果很好，但不會更改網址。 My version的確改變了URL沒有被完全測試。