【jQuery】ヒーローヘッダと固定グローバルナビを作る

こんにちは！セミマサです。

ウェブサイトを開いた際に画面いっぱいに表示される「ヒーローヘッダ」。うまく使えれば一気にユーザーを引きこむことができますよね！

今回はヒーローヘッダの作り方と、ヒーローヘッダの下に配置されたグローバルナビの固定の仕方についてまとめていきます。

デモサイト
HTML
CSS
jQuery
おわりに

デモサイト

下のボタンを押すとデモサイトへ移動します！

HTML

<header class="header">
    <div class="hero"></div>
    <h1 class="hero-txt">ヒーローヘッダと<br>固定ナビのデモ</h1>
</header>
<nav class="gnav head-nav">
    <div class="head-nav-box row">
        <p class="head-logo">固定ナビ</p>
        <ul class="head-nav-list row">
            <li><a href="#" class="head-nav-list-item">HOME</a></li>
            <li><a href="#" class="head-nav-list-item">ABOUT</a></li>
            <li><a href="#" class="head-nav-list-item">WORK</a></li>
            <li><a href="#" class="head-nav-list-item">CONTACT</a></li>
        </ul>
    </div>
</nav>
<section>
    <div class="content"></div>
</section>
<footer class="footer">
    <p class="copy-right">©今日もwebでセミが鳴く</p>
</footer>

今回のHTMLです。

CSS

@charset "UTF-8";
html, body, div,
h1, p, img, ul, li,
footer, header,nav {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent; }
body {
  line-height: 1; }
footer, header,nav{
  display: block; }
nav ul {
  list-style: none; }
a {
  margin: 0;
  padding: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent; }
.row {
  display: flex;
  flex-direction: row; }
.header {
  position: relative; }
.hero {
  height: 100vh;
  width: 100vw;
  background-image: url(../img/hero.jpg);
  background-size: cover;
  background-repeat: no-repeat; }
.hero-txt {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  font-size: 4rem;
  width: 80vw;
  line-height: 1.6;
  background-color: rgba(255, 255, 255, 0.1); }
.head-nav-box {
  justify-content: space-between;
  align-items: center;
  background-color: #e1a948; 
  padding: 0 4%;
}
.head-logo {
  width: 25%;
  text-align: center;
　color:white;
}
.head-nav-list {
  justify-content: space-around;
  align-items: center; 
  width: 75%;
}
.head-nav-list-item{
  text-decoration: none;
  color: white;
  display: block;
  padding: 12px;
  transition: all .3s; }
.head-nav-list-item:hover {
  background-color: rgba(255, 255, 255, 0.3); }
.gnav.fixed{
  position: sticky;
  top: 0;
  z-index: 9998; }
.content{
  width: 100vw;
  height: 200vh;
  background-color: antiquewhite;
}
footer {
  background-color: #52accc;
  width: 100%; }
.copy-right {
  text-align: center;
  padding: 20px 5%;
}
@media screen and (max-width: 768px) {
  .hero-txt {
    font-size: 3rem; }
 }
@media screen and (max-width: 480px) {
  .hero-txt {
    font-size: 2rem; }
  .head-logo{
    font-size: 0.8rem;
  }
  .head-nav-list-item {
    font-size: 0.8rem;
  }
}

今回のCSSになります。

・ヒーロヘッダは対象となる要素にwidth:100vw、height:100vhと指定すればOK。上記ソースでは「hero」クラスが該当します。

・今回はヒーローヘッダに背景画像を使用するので、background-imageプロパティで画像のURLを指定しています。CSSで相対パスの記述をする場合、CSSファイルからのパスを書く必要があります。間違えやすいので注意しましょう！

・background-sizeにcoverを指定すると領域を覆うように拡大・縮小されます。

・「.gnav.fixed」は後述するjQueryでの要素固定用の指定になります。

jQuery

今回のデモサイトのように「固定したい要素が途中にある」場合はjQueryでクラスを付与することで対応できます！

<script>
    $(function () {
        var _window = $(window);
        //固定したい要素
        var fixed_Element = $('.gnav');
        //固定したい要素が画面上部から何ピクセルなのかを取得
        var element_Top = fixed_Element.get(0).offsetTop;
        //ウィンドウがスクロールした際に実行
        _window.on('scroll', function () {
            if (_window.scrollTop() > element_Top) {
                fixed_Element.addClass('fixed');
            }
            else {
                fixed_Element.removeClass('fixed');
            }
        });
    });
</script>

・offsetTopで固定したい要素が画面上部から何ピクセルの位置にあるかを取得しています。

・スクロール時に、ウィンドウのスクロール値が「固定したい要素の位置」より大きい場合「固定したい要素」にfixedクラスを付与します。