【jQuery】スクロールでヘッダー固定されるスティッキーヘッダーを実装。Headtacular

【jQuery】スクロールするとヘッダーに固定されるスティッキープラグイン10選でご紹介したHeadtacular。Headtacularはユーザーがスクロールするとヘッダー固定されるスティッキーヘッダーを実装できるプラグイン。

jQuery

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

Headtacular

<script src="path/to/jquery.headtacular.min.js"></script>
$('.header').headtacular({ scrollPoint: 32 });

CSS

.header {
position: relative;
background-color: #fff;
padding: 10px 0px;
z-index: 99999;
transition: all 300ms;
}
.header.is-stuck {
position: fixed;
background-color: #000;
padding: 0px;
top: 0;
left: 0;
width: 100%;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.8);
}

オプション

scrollPoint

$('.example').headtacular({ scrollPoint: 200 });

showScrollPoint

$('.example').headtacular({ scrollPoint: 200, showScrollPoint: true });

parentOffset

$('.example').headtacular({ scrollPoint: 200, parentOffset: false });
 
Headtacular

【jQuery】スクロールでヘッダー固定されるスティッキーヘッダーを実装。Headtacular

  • LATEST
  • RELATED
  • POPULAR