My Vector Space

  人生は寄り道してなんぼ

グローバルナビやページ途中にある要素を スクロール時にトップに固定するJQuery

 

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

 

作業内容は3箇所

htmlのhead内にjQuery 本体と各ファイルを読み込ませ、スクリプトを記述

body内の固定したい要素に「id=”fixedBox”」を設定

固定するための設定をcssに記述

 

 

細かい部分を見ていくと、

まず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
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
 
固定するための設定をcssに記述する
 【 css 】
 1
  .fixed{
 2
    position:fixed;
 3
    top:0;
 4
    width:100%;
 5
    z-index:10000;
 6
    }

以上で設定終了。

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

また  応用してサイドバーを固定したりすることもできる。

 

 

PAGE TOP