【jQuery】スクロールするとナビゲーションをページ上部に固定する方法

今回はjQueryを用いて、スクロールするとナビゲーションをページ上部に固定する方法をご紹介いたします。

最初から固定させるのでなく、スクロールで上部に達したタイミングで固定します。

完成形デモ

See the Pen NWNWpvm by crnote (@crnote) on CodePen.

CSS

固定用のcss

後ほどjQueryで、#navがページ上部に達したら、「.fixed」を付与するという処理を実装します。
cssでは「.fixed」に#navが固定された際のスタイルを記述します。
「position: fixed;」と「top: 0;」を指定することで、ページ上部に固定されます。

  1. /*固定用css*/
  2. .fixed {
  3.   position: fixed;
  4.   top: 0;
  5.   width: 100%;
  6. }

jQuery

最初に、offset()メソッドで、#navの位置を取得します。

次に、$(window).scrollTop() で、現在のスクロールの縦位置を取得します。

現在のスクロール位置と#navの位置を比較して、#navの位置よりスクロール位置が大きくなった場合に、#navに「.fixed」を追加します。

#navよりスクロール位置が小さい場合は「.fixed」を削除します。

  1. $(function() {
  2.     var offset = $('#nav').offset();
  3.  
  4.     $(window).scroll(function () {
  5.         if ($(window).scrollTop() > offset.top) {
  6.             $('#nav').addClass('fixed');
  7.         } else {
  8.             $('#nav').removeClass('fixed');
  9.         }
  10.     });
  11. });

まとめ

いかがでしたでしょうか？
jQueryはそれほど複雑ではなく、簡単に実装することが出来ますので、是非参考にしてみてください！

PAGE TOP