【jQuery】Animate.cssを使ってスクロールイベントを面白く。Headroom.js

Headroom.jsはユーザーのスクロールに対応した軽量、高性能なJSウィジェットです。
ヘッダーはスクロールダウンしたときにビューの外にスライドし、スクロールアップするときにバックスライドし表示されます。

【jQuery】スクロールするとヘッダーに固定されるスティッキープラグイン10選でHeadroom以外のスティッキーもご紹介しています。よろしければこちらもご覧ください。

jQuery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="src/headroom.js"></script>
<script src="src/jQuery.headroom.js"></script>

CSS

.headroom {
will-change: transform;
transition: transform 200ms linear;
}
.headroom--pinned {
transform: translateY(0%);
}
.headroom--unpinned {
transform: translateY(-100%);
}

動作

headroom.jsによって追加および削除されるクラス

<!-- initially -->
<header class="headroom">
<!-- scrolling down -->
<header class="headroom headroom--unpinned">
<!-- scrolling up -->
<header class="headroom headroom--pinned">

JS

$("header").headroom();

オプション

{
// vertical offset in px before element is first unpinned
offset : 0,
// scroll tolerance in px before state changes
tolerance : 0,
// or scroll tolerance per direction
tolerance : {
down : 0,
up : 0
},
// element which is source of scroll events. Defaults to window
scroller : element,
// css classes to apply
classes : {
// when element is initialised
initial : "headroom",
// when scrolling up
pinned : "headroom--pinned",
// when scrolling down
unpinned : "headroom--unpinned",
// when above offset
top : "headroom--top",
// when below offset
notTop : "headroom--not-top",
// when at bottom of scoll area
bottom : "headroom--bottom",
// when not at bottom of scroll area
notBottom : "headroom--not-bottom"
},
// callback when pinned, `this` is headroom object
onPin : function() {},
// callback when unpinned, `this` is headroom object
onUnpin : function() {},
// callback when above offset, `this` is headroom object
onTop : function() {},
// callback when below offset, `this` is headroom object
onNotTop : function() {}
// callback at bottom of page, `this` is headroom object
onBottom : function() {},
// callback when moving away from bottom of page, `this` is headroom object
onNotBottom : function() {}
}

Animation

Animate.cssが必要になります。

$("header").headroom({
"offset": 205,
"tolerance": 5,
"classes": {
"initial": "animated",
"pinned": "slideDown",
"unpinned": "slideUp"
}
});
// to destroy
$("#header").headroom("destroy");

詳しくはheadroom.js playroomをご覧ください。

ライセンスはMIT。

 
headroom.js

【jQuery】Animate.cssを使ってスクロールイベントを面白く。Headroom.js

  • LATEST
  • RELATED
  • POPULAR