スクロール途中からヘッダー部分を固定させる平成30年 8月 1日 作成
概略
スクロールし始めるとヘッダー位置が固定するページの仕組みを理解する。
手段
JavaScriptにて実現可能。規定の位置までスクロールしたらheaderに対してクラスを付与するスクリプトを記述する。今回はjQueryを活用する。
実装方法
HTML
<html lang="ja"> <head> <title>スクルールサンプル</title> </head> <body> <div id="container"> <header> <h1>サンプルサイト</h1> </header> </div> </body> </html>
CSS
#container header {
width: 100%;
height: 20rem;
}
#container header.fixed {
position: fixed;
left: 0;
top: 0;
}
jQuery
$(function(){
var $target = $('header');
$(window).scroll(function(){
if($(window).scrollTop() > 300){
$target.addClass('fixed');
}else{
$target.removeClass('fixed');
}
});
});
// スクロールした状態でリロードすると固定されない不具合の対策 load追加
$(function(){
var $target = $('header');
$(window).on('load scroll', function(){
if($(window).scrollTop() > 300){
$target.addClass('fixed');
}else{
$target.removeClass('fixed');
}
});
});
デモ
総評
アニメーションを加えると更に見栄えも良くなる感じ。
いろいろと応用が効きそうなので基本は抑えておきたい。
ヘッダー位置が固定する事により、アクセシビリティの向上にも一役買う結果となった。
その他
最後までお読み下さり ありがとうございました。記事はここ迄です。
尚、本記事は作成から「5年以上」経過しています。
記事作成当時と現在の状況等により内容が適切でない場合があります。また、リンク切れが生じている場合もあります事を予めご了承下さい。
お気に入りに登録しますとお気に入り記事を一元管理でき、再度閲覧したい場合等 容易に記事を探し出す事ができますのでご活用下さい。
下段にはコメントを掲載しております。
広告バナー
コメント
頂いたコメントを下記に掲載しております。更に下部にはコメント投稿フォームを設けております。
注意事項を確認・了承した上、コメント投稿お願いいたします。
注意事項に該当するコメントにつきましては、事前告知なしに投稿したコメントの削除を行う場合があります。
予めご了承下さい。
- 記事内容と無関係なコメント
- 公序良俗に反するコメント
- 個人情報や法令違反を含むコメント
- その他、管理者が不適切と判断したコメント
現在 頂いているコメントはありません
