こちらのサイトのトップページの作り方

質問

こちらのサイトを参考にしながらサイトを作っています。
トップから下にスクロールしていくと２ページ目（実際はサイトの縦長シングルページですので２ページ目というのはありませんが）で白い背景のトップメニューがふわっとでてきます。

そして最後のページまでトップメニューがついてきます。

これはどのように実装しているのでしょうか？
jQuery,javascriptにお詳しい方、もしよろしければご教授お願いいたします。

http://www.trailspring.org/#about

回答No.1

tracer

例のサイトでは、実装部分をjQueryプラグイン化してやってますね。
おそらく自作の実装部分waypoints-sticky.min.jsを読み込んだ上で、main.jsの以下の箇所で実行しています。

$('.sticky-header').waypoint('sticky');

やってることは単純で、

1.　メニューを出す位置を指定
2.　スクロール位置が1.で指定した値を満たしているかどうかを調査
3.　2.の調査で満たしている場合は表示
4.　2.の調査で満たしていない場合は非表示

これだけです。
そのまま使えるソースが欲しいのでしたら、[jQuery sticky]あたりのキーワードで腐るほどでると思います。
ただ、この機能は誤った作り方をしているものを使ってしまうと、サイトがかなり重くなります。とくにスマートフォンでのパフォーマンスに影響があります。ご利用は計画的に。

補足

回答ありがとうございます！ロジックは割と簡単なんですね。先ほどまでjQueryで自分のサイト内で挑戦していたのですがなかなか上手くゆきませんでした。

２つ問題がありまして、１つは初期位置から少しずれるとURL（内容は位置移動）が効かなくなります。もう１つには、動画をたくさん貼っているサイトなのですが、スティッキー用のバーが動画の下に隠れてしまいます。z-indexを少し使ってみたのですが上手く行きません。。動画はクリックするとモーダルウィンドウが開くようになっています。

もしお気づきでお時間がございましたらこちらも教えていただけたらなーと思います。
後日、別枠で質問してみようかと思います。