jQuery

【jQuery】スティッキーヘッダーを実装できるプラグイン。Headhesive.js

January 21, 2016

【jQuery】スクロールするとヘッダーに固定されるstickyナビ系jQueryプラグイン10選でご紹介したHeadhesive.jsの使い方です。Headhesive.jsはスティッキーヘッダーを作成するプラグイン。

jQuery

<script type="text/javascript" src="/labs/headhesive/js/headhesive.min.js"></script>

オプション

var options = {
  offset: 300,
 offsetSide: 'top',
  classes: {

    // Cloned elem class
    clone: 'headhesive',

    // Stick class
    stick: 'headhesive--stick',

    // Unstick class
    unstick: 'headhesive--unstick'

}
var header = new Headhesive('.header', options);

CSS

.headhesive {

  /* Required styles */
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;

  /* Additional styles */
  background: #c95a5d;

  /* Translate -100% to move off screen */
  -webkit-transform: translateY(-100%);
      -ms-transform: translateY(-100%);
          transform: translateY(-100%);

  /* Animations */
  -webkit-transition: all 300ms ease-in-out;
     -moz-transition: all 300ms ease-in-out;
          transition: all 300ms ease-in-out;

}

.headhesive--stick {

  /* Translate back to 0%; */
  -webkit-transform: translateY(0%);
      -ms-transform: translateY(0%);
          transform: translateY(0%);
}

.headhesive--unstick {
  /* Not required to use, but could be useful to have */
}

IE9 以上の最新のブラウザをサポートされているようです。
ライセンスはMIT。