CSSとJavaScriptを使用して、スクロール時にナビゲーションバーのサイズを変化させる方法

 

スクロール時にナビゲーションバーを変化させるTIPS

スクロール時にナビゲーションバーを縮小させるTIPSです。

デモページでははBootstrapを使ってnavbar-brandをフォント指定していますが、自作のナビゲーションバーにも対応可能です。画像ものについてはやり方が違うので、次回にでも記載します。

デモはこちらです。
https://codepen.io/codenowa/full/gOrOgEX

 

ステップ1 HTMLでナビゲーションバー追加します。

ナビゲーションバーを作成します。

<nav class="navbar navbar-expand-lg bg-dark fixed-top" id="mainNav">
    <div class="container">
      <a class="navbar-brand" href="#">Navbar</a>

      <button class="navbar-toggler second-button" type="button" data-toggle="collapse" data-target="#navbarResponsive"
        aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
        <div class="animated-icon">
          <span></span>
          <span></span>
          <span></span>
          <span></span>
        </div>
      </button>

      <div class="collapse navbar-collapse" id="navbarResponsive">
        <ul class="navbar-nav ml-auto">
          <li class="nav-item">
            <a class="nav-link" href="#">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

 

ステップ2 CSSを追加します。

CSSでナビゲーションバーのスタイルを整えます。実際にはSCSSで書いています。

#mainNav {
  .navbar-toggler {
    right: 0;
    padding: 12px;
    border: none;
    background-color: bg-dark;
    outline:none;
  }
  .navbar-brand {
    color: #6999cc;
    font-weight: 900;
    &.active,
    &:active,
    &:focus,
    &:hover {
      color: darken(#6999cc, 10%);
    }
  }
  .navbar-nav {
    .nav-item {
      .nav-link {
        font-size: 90%;
        font-weight: 400;
        padding: 0.75em 0;
        letter-spacing: 1px;
        color: #ffffff;
        &.active,
        &:hover {
          color: #6999cc;
        }
      }
    }
  }
}
@media(min-width:992px) {
  #mainNav {
    -webkit-transition: padding-top 0.3s, padding-bottom 0.3s;
    -moz-transition: padding-top 0.3s, padding-bottom 0.3s;
    transition: padding-top 0.3s, padding-bottom 0.3s;
    border: none;
    background-color: transparent;
    .navbar-brand {
      font-size: 3em;
      padding: 12px 0;
      -webkit-transition: all 0.3s;
      -moz-transition: all 0.3s;
      transition: all 0.3s;
    }
    .navbar-nav {
      .nav-item {
        .nav-link {
          padding: 1.1em 1em !important;
        }
      }
    }
    &.navbar-shrink {
      padding-top: 0;
      padding-bottom: 0;
      .navbar-brand {
        font-size: 1.5em;
        padding: 12px 0;
      }
    }
  }
}
.animated-icon {
  width: 30px;
  height: 20px;
  position: relative;
  margin: 0px;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  cursor: pointer;

  span {
    display: block;
    position: absolute;
    height: 3px;
    width: 100%;
    border-radius: 9px;
    opacity: 1;
    left: 0;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .25s ease-in-out;
    -moz-transition: .25s ease-in-out;
    -o-transition: .25s ease-in-out;
    transition: .25s ease-in-out;
    background: #6999cc;

    &:nth-child(1) {
      top: 0px;
    }

    &:nth-child(2), &:nth-child(3) {
      top: 10px;
    }

    &:nth-child(4) {
      top: 20px;
    }
  }

  &.open span {
    &:nth-child(1) {
      top: 11px;
      width: 0%;
      left: 50%;
    }

    &:nth-child(2) {
      -webkit-transform: rotate(45deg);
      -moz-transform: rotate(45deg);
      -o-transform: rotate(45deg);
      transform: rotate(45deg);
    }

    &:nth-child(3) {
      -webkit-transform: rotate(-45deg);
      -moz-transform: rotate(-45deg);
      -o-transform: rotate(-45deg);
      transform: rotate(-45deg);
    }

    &:nth-child(4) {
      top: 11px;
      width: 0%;
      left: 50%;
    }
  }
}

この時にnavbar-shrinkでサイズの変化を指定します。

 

ステップ3 JavaScriptを追加します。。

(function($) {
  "use strict"; // Start of use strict
  
    $(document).ready(function () {
  $('.second-button').on('click', function () {
    $('.animated-icon').toggleClass('open');
  });

});
  
  // Collapse Navbar
  var navbarCollapse = function() {
    if ($("#mainNav").offset().top > 30) {
      $("#mainNav").addClass("navbar-shrink");
    } else {
      $("#mainNav").removeClass("navbar-shrink");
    }
  };
  // Collapse now if page is not at top
  navbarCollapse();
  // Collapse the navbar when page is scrolled
  $(window).scroll(navbarCollapse);
  
})(jQuery);

JavaScriptでいつくスクロールしたら変化させる、という命令を出します。デモでは30と指定しています。

 

まとめ

手順さえ間違わなければ簡単に実装できるので、ウェブサイトに変化をつけたい時には有効かもしれませんね。