ページの下方向にスクロールしていくと画面上部に固定化されるヘッダー(もしくはナビ等)のこと。
固定化したい要素に”position:sticky;”を設定すればそれで実現できるみたいだが、自作してみた。
ソースコード
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<header> <div class="inner"> </div> <nav> <ul class="menu-list"> <li class="menu-list-item">項目1</li> <li class="menu-list-item">項目2</li> <li class="menu-list-item">項目3</li> <li class="menu-list-item">項目4</li> <li class="menu-list-item">項目5</li> </ul> </nav> </header> <div class="content"> <p>ダミーテキスト</p> </div> |
ダミーテキストは以下から取得。
すぐ使えるダミーテキスト – 日本語 Lorem ipsum
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
header { width: 100%; background-color: #eee; } header .inner { height: 300px; } header.sticky { /* navをfixedにするとnavの高さが消えてレイアウトが乱れるので paddingでnavと同じ高さを確保する */ padding-bottom: 50px; /* navの高さと同じ */ } nav { width: 100%; } nav.sticky { position: fixed; top: 0; } .menu-list { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; width: 100%; background-color: #aaa; } .menu-list-item { width: 100px; height: 50px; line-height: 50px; } .content { width: 100%; height: 3000px; background-color: #ccc; } |
jQuery
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
$(function(){ var $window = $(window); var $header = $('header'); var $nav = $header.find('nav'); var headerHeight = $header.height(); // headerの高さ var navHeight = $nav.height(); // navの高さ $window.scroll(function() { // 現在の位置 var currentPos = $window.scrollTop(); // 現在の位置がnavまで到達したらnavを固定 if(currentPos >= headerHeight - navHeight) { $header.addClass('sticky'); $nav.addClass('sticky'); } else { $header.removeClass('sticky'); $nav.removeClass('sticky'); } }); }); |
コメントを残す