スティッキーヘッダーの作成【jQuery】

スティッキーヘッダー

様々なホームーページで見かけるヘッダーが上下に動いて、トップに固定されるやつです！！

code

##html

<header class="page-header" role="banner">
   <div class="inner">
       <h1 class="site-logo"><a href="./"><img src="./image/logo.png" alt="Shiftbrain" height="65" width="200"></a></h1>
       <nav class="primary-nav" role="navigation">
           <ul>
               <li><a href="./">About</a></li>
               <li><a href="./">Work</a></li>
               <li><a href="./">Blog</a></li>
               <li><a href="./">Recruit</a></li>
               <li><a href="./">Contact</a></li>
           </ul>
       </nav>
   </div>
</header>

##css

@charset "urf-8";

html { font-family: "ropa sans", sans-serif; font-size: 16px; line-height: 1.5;}
body { background-color: rgb(240, 240, 240); color: rgb(0, 0, 0); min-width: 960px; padding-top: 240px;}
h1, h2, h3, p, ul { margin: 0;}
ul  { padding-left: 0;}
ul li { list-style-type: none;}
a { color: inherit; text-decoration: none;}
img { vertical-align:  middle;}
.clearfix::before, .clearfix::after { content: ""; display: table; }
.clearfix::after { clear: both;}
.dummy { margin: 0 auto; max-width: 32em; padding: 2em 0;}


.page-header {
 background-color: rgb(255, 255, 255);
 position: absolute;
 width: 100%;
 min-width: 960px;
 -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
         box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
}

.page-header.sticky {
 position: fixed;
 top: 0;
}

.page-header .inner {
 margin: auto;
 width: 960px;
}

.no-boxshadow .page-header {
 border-bottom: 1px solid rgb(204, 204, 204);
}

/* logo */
.site-logo {
 float: left;
 margin-left: 50px;
}

/* nav */
.primary-nav {
 float: right;
 line-height: 65px;
 letter-spacing: 1px;
 text-transform: uppercase;
}

.primary-nav li {
 float: left;
}

.primary-nav a {
 display: block;
 padding: 0 1.36em;
}

.primary-nav a:hover {
 background-color: rgb(2400, 240, 240);
}

##js

$(function() {

 var $window = $(window),
     $header = $('.page-header'),
     headerOffsetTop = $header.offset().top;


 $window.on('scroll', function() {
   if ($window.scrollTop() > headerOffsetTop) {
     $header.addClass('sticky');
   } else {
     $header.removeClass('sticky');
   }
 });

 $window.trigger('scroll');

});

勉強になったこと

// scrollTop();
   指定した要素のスクロール位置の取得
   http://www.jquerystudy.info/reference/css/scrollTop.html

// offset();
    要素のドキュメント上での取得
　https://www.flatflag.nir87.com/offset-1167

// trigger();
    イベントを任意のタイミングで開始できる
　https://programmercollege.jp/column/11955/

各メソッドの説明については、参照したリンクに詳しく書いているので改めて説明はしません。

参考文献

jQuery 最高の教科書　株式会社シフトブレイン 著