javascript - 粘着性のあるナビゲーション バーに移動するヘッダーを作成するにはどうすればよいですか?

Question

グラフィック/画像を含むヘッダーを作成したいと思います。ユーザーが下にスクロールしてページのコンテンツを表示すると、ヘッダーはベースから始まり、画面の上部に固定されます。

以下に例を示します: http://www.thinkful.com/learn/javascript-best-practices-1/

これをどのように作成しますか？

Answer 1

jQuery の使用:

1. 関数をスクロールイベントに$(window).on('scroll',function(){ /*your code*/ });バインドできます。

2. その関数内document.scrollTopで、スクロールバーの現在の垂直位置を知るために使用します

3. .css()またはでヘッダーとサイドメニューのcssを変更します.addClass()

4. 最後に、HTML5 History APIhistory.replaceState()を使用すると、メソッドを使用してページをロードせずに URL を変更できます。

仕事をするScrollit.jsというプラグインをフォークしました。Chris Polisの元のバージョンはうまく機能しますが、URL は変更されていません。私のバージョンでは URL が変更されますが、完全にはテストされていません。