jQuery

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

April 30, 2016
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 });