パララックススクロールが可能なサイトでスクロール途中に固定ナビゲーションを出したいときの設定

概要

タイトルのとおり、パララックススクロールができる縦長のウェブページで、スクロール途中から固定ナビゲーションバーを出したいときの簡単な設定の仕方です。

HTML

ナビゲーションのHTML部分は次のようなリストで作成します。hrefの値にはジャンプ先のidなどを入れてください。

<header id="gnav">
  <ul>
    <li><a href="#">Page I</a></li>
    <li><a href="#">Page II</a></li>
    <li><a href="#">Page III</a></li>
    <li><a href="#">Page IV</a></li>
  </ul>
</header>

CSS

次いでCSSです。ポイントは#gnavのtopにマイナスの値が入っていることです。マイナス値の大きさは#gnavのheightと同じで良いと思います。これでウィンドウ外に#gnavが表示される状態になります。colorやfontなどは適宜書き換えてください。

header#gnav {
  width: 100%;
  height: 10%;
  position: fixed;
  top: -10%;
  z-index: 100;
  opacity: 0.7;
  color: #fff;
}

header#gnav ul {
  list-style-type: none;
  width: 100%;
  height: 100%;
}

header#gnav ul li {
  width: 20%;
  float: left;
  margin: 1% 0 0 5%;
}

header#gnav ul li a {
  font-size: 1.7rem;
  font-family: "Hiragino Mincho Pro", serif;
  font-weight: bold;
  color: #fff;
  text-decoration: none;
}

header#gnav ul li a:hover {
  color: #0f0;
}

JavaScript

最後にJavaScriptです。やっていることは単純で、あるところまで画面がスクロールするとid="gnav"をもった要素のtopを0にしてウィンドウ上部に表示させるようにし、もとに戻るとtopの値をマイナス値に表示させないようにしています。ここではページの一番上から1500pxまでスクロールしたところでナビゲーションが出るようにしています。

$(document).ready(function(){

    $(window).scroll(function () {
        if ( $(window).scrollTop() > 1500 ) {
            $('#gnav').css({'top':'0'});
        } else {
            $('#gnav').css({'top':'-10%'});
        }
    });

});

ブラウザのウィンドウサイズ分移動したらナビゲーションが出るようにしたい場合は、1500のところを

$(window).height()

に変えてください。