jQuery

【jQuery】シンプルなスティッキーヘッダー。Sticky Header

January 11, 2016
Sticky Header

Sticky Headerはスティッキーヘッダーを作るためのシンプルなjQueryプラグイン。
一定のところまでスクロールしたらヘッダーがついてくるあれです。

HTML

<script type="text/javascript" src="js/jquery.min.js"></script> 
<script type="text/javascript" src="js/sticky-header.js"></script>

<header class="example"> 
  <!--  header stuff ... --> 

プラグイン

$(document).ready(function(){
  $('.example').stickMe(); 
})

</header>

プラグインのクラス

<!-- Now plugin adds classes to your header on page load --> 
<header class="example stick-me not-sticking"> 
  <!--  header stuff ... --> 
</header>



<!-- Header is sticky --> 
<header class="example stick-me sticking"> 
  <!--  header stuff ... --> 
</header>

Style

/* Make sure your header has z-index and background set and it's also full width */
.example {
  width: 100%;
  z-index: 999;
  background-color: #ffffff;
}

/* OR you can also style plugin's class .sticking, 
that way you can style it differently when it's sticking */
.sticking {
  width: 100%;
  z-index: 999;
  background-color: #ffffff;
}

デフォルト

transitionDuration: 300,
shadow: false,
shadowOpacity: 0.3,
animate: true,
triggerAtCenter: true,
transitionStyle: 'fade',
stickyAlready: false

カスタマイズ

topOffset どれだけ下にスクロールされたときにヘッダーが固定されるか
shadow 影をつけるか
shadowOpacity 影の不透明度
animate アニメーション
transitionStyle トランジションスタイル
triggetAtCenter ビューポートの外にスクロールされたときだけ、固定させるか
stickyAlready スティッキーページのロード
transitionDuration アニメーションの遷移時間

イベント

sticky-begin スティッキー取得
sticking 固定されている場合
top-reached ドキュメントのトップに到達
bottom-reached ボトムに到達

イベントの使用

$(document).ready(function(){
  $('.site-header').on('sticky-begin', function() { 
    console.log("Began"); 
  });

  $('.site-header').on('sticking', function() { 
    console.log("Sticking"); 
  });

  $('.site-header').on('top-reached', function() { 
    console.log("Top reached"); 
  });

  $('.site-header').on('bottom-reached', function() { 
    console.log("Bottom reached"); 
  });
})

ライセンスはMIT