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

【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。

 

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

  • LATEST
  • RELATED
  • POPULAR