【jQuery】シンプルなスティッキーヘッダー。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

 
Sticky Header

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

  • LATEST
  • RELATED
  • POPULAR