jQueryでスクロールするとヘッダーを固定させる
公開日：
:
jQuery
最近よくあるページがスクロールを始めるとヘッダーの位置が固定するjQueryのスクリプトです。
よく使うのでメモがわりに掲載します。
基本は簡単なので覚えておけばいろいろ応用できるかと思います。
仕組みは、<header>の高さ分（デモでは80px）スクロールすると<nav>にfixedクラスが追加されることで固定されます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
header { width: 100%; height: 80px; color: #333; background: #EEE; } nav { width: 100%; color: #FFF; background: #333; } nav.fixed { position: fixed; left: 0; top: 0; } |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
$(function() { //ロード or スクロールされると実行 $(window).on('load scroll', function(){ //ヘッダーの高さ分(80px)スクロールするとfixedクラスを追加 if ($(window).scrollTop() > 80) { $('nav').addClass('fixed'); } else { //80px以下だとfixedクラスを削除 $('nav').removeClass('fixed'); } }); }); |
scrollのみだと、スクロールした状態で更新ボタンを押すと固定されないので、loadも追加しています。
関連記事
-
-
デザイナーでもJavaScriptやjQueryが必ず上達する3つのコツ
いまやJavascriptを使わないサイトはほぼないと思います。 WEBデザイナーもJav
-
-
jQueryで追加したstyle属性を全て削除する方法
jQueryでアニメーションなどを行うとインライン要素でstyle属性が追加されますが全て削除したい
-
-
スクロールしたら「トップへ戻る」ボタンを表示するプラグインjquery.pageTopButton.js
Wordpressによくある スクロールしたら「トップへ戻る」ボタンを表示するプラグイ
-
-
【簡単！】ページのアクセス時にモーダル（フロート）を表示するjQuery.layerBoard.js
「セール情報」や「重要なお知らせ」を、 モーダル（フロート）で目立たせたいという要望が