さぁ!検索しよう!

ページをスクロールしても常に画面上部に配置されるヘッダーの実装方法を解説します。

常に上部に配置されることで、ページの先頭へ戻る必要がなく、すぐに別のページへ移動することができます。

それでは始めに完成デモの確認です。

完成デモ

ページをスクロールしていき、ナビゲーションが画面から消えると思いきや、画面の上部で止まったままであることが確認できます。

続いて、各ソースコードの確認です。

始めにHTMLです。

HTML

<div class="container">
  <header>
    <div class="top">
      <div class="social">
        <ul>
          <li><a class="tw-li" href="https://twitter.com/mm_manual"><i class="fa fa-twitter fa-1"></i></a></li>
          <li><a class="fb-li" href="https://www.facebook.com/marumarumanual"><i class="fa fa-facebook fa-1"></i></a></li>
          <li><a class="g-li" href="#"><i class="fa fa-google-plus fa-1"></i></a></li>
          <li><a class="rss-li" href="http://marumarumanual.net/feed/"><i class="fa fa-rss fa-1"></i></a></li>
        </ul>
      </div>
    </div>
    <div class="center clearfix">
      <div class="logo">LOGO</div>
      <form id="searchform">
        <input type="text">
        <input type="submit" value="&#xf002;">
      </form>
    </div>
    <div class="bottom">
      <nav class="clearfix">
        <ul>
          <li>Home</li>
          <li>About</li>
          <li>Contact</li>
          <li>Portfolio</li>
          <li>Download</li>
        </ul>
      </nav>
    </div>
  </header>
</div>

今回jQueryで操作するマークアップは<div class="bottom"></div>のみです。

続いてCSSです。

CSS

* {
  font-family: 'Raleway', sans-serif;
}

.clearfix:after {
  content: "";
  clear: both;
  display: block;
}

.container {
  background: #E8F5FB;
  height: 5000px;
  margin: 0 auto;
  overflow: hidden;
  width: 800px;
}

.top {
  background: #3A8EBF;
  padding: 10px;
}

.social li {
  display: inline-block;
}

.social a {
  background: #E8F5FB;
  border-radius: 50%;
  display: block;
  height: 20px;
  line-height: 20px;
  padding: 5px;
  text-align: center;
  width: 20px;
}

.social i {
  color: #3A8EBF;
}

.center {
  background: #E8F5FB;
  padding: 10px;
}

.logo {
  background: #5EA3CB;
  border-radius: 5px;
  color: #fff;
  float: left;
  height: 50px;
  line-height: 50px;
  text-align: center;
  width: 200px;
}

#searchform {
  float: right;
}

input[type="text"],
input[type="submit"] {
  border: none;
  border-radius: 5px;
  padding: 5px;
}

input[type="text"] {
  border: 1px solid #5EA3CB;
  width: 350px;
}

input[type="submit"] {
  background: #3A8EBF;
  color: #fff;
  font-family: FontAwesome;
  width: 50px;
}

.bottom {
  background: #3A8EBF
}

.bottom.sticky {
  opacity: 0.4;
  position: fixed;
  top: 0;
}

.bottom.sticky:hover {
  opacity: 1;
}

nav ul,
.social ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

nav li {
  color: #fff;
  display: inline-block;
  padding: 10px 20px;
}

nav li:nth-child(odd) {
  background: #5EA3CB;
}

後にjQueryで、ナビゲーションである.bottom.stickyというクラスを追加するため、予め.stickyというクラスを用意しています。このクラスにはナビゲーションを画面上部に固定配置させるためのposition:fixed;top:0;、そして固定配置された後もページを読みやすくするために、opacity:0.4;でナビゲーションを透過させています。

更に、透過されたナビゲーションにカーソルが乗ると不透明になります。

.bottom.sticky {
  opacity: 0.4;
  position: fixed;
  top: 0;
}

.bottom.sticky:hover {
  opacity: 1;
}

最後にjQueryです。

jQuery

$(function() {
  $('.bottom').each(function() {
    var $window = $(window),
      $header = $(this),
      headerOffset = $header.offset().top;
    $window.scroll(function() {
      if ($window.scrollTop() > headerOffset) {
        $header.addClass('sticky');
      } else {
        $header.removeClass('sticky');
      }
    });
    $window.trigger('scroll');
  });
});

headerOffset = $header.offset().top;で、ナビゲーションのページ上からの座標を取得しています。

その後if ($window.scrollTop() > headerOffset) {}で、ウィンドウのスクロール上の上位置がナビゲーション上部の座標よりも大きくなれば、ナビゲーションにstickyクラスを追加し小さくなれば削除しています。

offset

この条件よって、ナビゲーションが画面上部に固定されたりされなかったりします。

以上です。