【jQuery】初期表示は開いていて、スクロールすると閉じるfixedのナビゲーション|Blog|株式会社トライム

Keyword

Contact

についての不明点や案件のご相談などございましたらお気軽にお問い合わせください。

Share

X Facebook pocket LINE はてなブックマーク

【jQuery】初期表示は開いていて、スクロールすると閉じるfixedのナビゲーション

2016.12.22

週末はクリスマスですね。
今年も残りわずか、一年あっという間です。

さて今回は初期表示は開いていて、スクロールすると閉じるfixedのナビゲーションです。
ボタンを押して意図的に開いたときにはスクロールしても閉じないようにしています。

デモ

See the Pen vyMGvP by leo (@leo-trym) on CodePen.

ソース

HTML

<header class="header">
  <div class="btn"><i class="fa fa-bars" aria-hidden="true"></i></div>
  <nav class="nav">
    <ul>
      <li><a href="#">HOME</a></li>
      <li><a href="#">ABOUT</a></li>
      <li><a href="#">BLOG</a></li>
    </ul>
  </nav>
</header>

CSS

.nav {
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}

.nav ul li {
  display: inline-block;
  padding: 0 1em;
  color: #ccc;
}

.nav ul li a {
  color: #fff;
}

.btn {
  position: fixed;
  z-index: 1100;
  top: 0;
  right: 2.5%;
  cursor: pointer;
  font-size: 35px;
}

JS

$(function () {

  var $nav = $('.nav'), // ナビのクラス
      $btn = $('.btn'); // ボタンのクラス

  $btn.click(function(){
    $nav.stop().slideToggle(function(){

      if ( $(this).is(':visible') ) {
        $(this).addClass('open'); // ボタンで開いたらクラスにopenを付与
      } else {
        $(this).removeClass('open'); // 閉じたらopenを削除
      }

    });
  });

  var wintop = $(window).scrollTop(); // 読み込み時のスクロール位置

  $(window).on('scroll', function () {
    if ( !$nav.hasClass('open') && wintop != $(window).scrollTop() ) { // クラスにopenがなく、wintopとスクロール位置がずれたら
      $nav.slideUp(); // ナビゲーションを隠す
    }
  });

});

Share

X Facebook pocket LINE はてなブックマーク
Webサイト制作についてお悩みでしたら私たちにご相談ください。

私たちはECサイトなどのBtoCのサイトの制作に特化したWeb制作会社です。マーケティング視点をもったクリエイティブにより、運用まで見据えた効果の高いWebサイトを構築いたします。Webサイトについてお悩みのWeb担当者の方は、トライムまでお気軽にご相談ください。

Keyword

Contact

についての不明点や案件のご相談などございましたらお気軽にお問い合わせください。

Contact

お問い合わせ

トライムは常にお客様へ寄りっ沿った提案をさせていただきます。
自社のEC売上の拡大や人材不足などのお客様のデジタル上の課題を、
様々なアプローチにより解決するお手伝いをいたします!
お気軽にお問い合わせください。

TEL

03-6403-3259

受付:10:00 - 19:00