My Vector Space

  人生は寄り道してなんぼ

画面をスクロールさせて、指定した要素がトップの位置に来た時に固定表示させる方法

f:id:ooigawa-bitter-sweet:20150322135127j:plain

画面をスクロールさせて、指定した要素がトップの位置に来た時に、トップに固定表示させる方法をまとめておきます。 グローバルナビやサイドバーをはじめ、ページ途中にある要素を固定配置させたい時に便利です。

作業内容は以下の三箇所です。

  •   htmlのhead内にjQuery本体と各ファイルを読み込ませて、スクリプトを記述
  •   body内の固定したい要素に「id=”fixedBox”」を設定
  •   固定するための設定をcssに記述

以下で細かく見ていきます。

画面をスクロールさせて、指定した要素がトップの位置に来た時に固定表示させる方法
1.  まずhtmlのhead内に jQuery 本体と各ファイルを読み込ませ以下のスクリプトを記述していく
 【 index.html】
 1
  <!--グローバルナビやページ途中にある要素をスクロール時にトップに固定-->
 2
  <script type="text/javascript">
 3
  jQuery(function($) {
 4
 
 5
  var nav = $('#fixedBox'),
 6
      offset = nav.offset();
 7
 
 8
  $(window).scroll(function () {
 9
    if($(window).scrollTop() > offset.top) {
 10
         nav.addClass('fixed');
 11
    } else {
 12
        nav.removeClass('fixed');
 13
     }
 14
  });
 15
        
 16
  });
 17
 </script>
 18
      

スクリプトの部分は以下のような設定になっています。

f:id:ooigawa-bitter-sweet:20150309015545j:plain
2.  body内の固定したい要素に、id=”fixedBox”」を設定
 【 html 】
 1
  <div id=”fixedBoxclass=”nav“>
 2
    <ul>
 3
      <li>sample–1</li>
 4
      <li>sample–2</li>
 5
      <li>sample–3</li>
 6
    </ul>
 7
  </div>
 8
 
 9
 
3.  固定するための設定をcssに記述する
 【 css 】
 1
  .fixed{
 2
    position:fixed;
 3
    top:0;
 4
    width:100%;
 5
    z-index:10000;
 6
    }

以上で設定は完了。

ちなみに、ID名は「fixedBox」でなくてもOK。

PAGE TOP