jQuery+CSS3でスクロールするとアニメーションして狭くなる固定ナビゲーション

Posted: 2015.10.28 / Category: javascript / Tag: jQuery
ファーストビューでは大きめのナビゲーションで、スクロールするとアニメーションしてナビゲーションの幅が狭くなって固定されるという動きのやつです。
Sponsored Link
HTML
HTMLの構造です。どこにでもあるシンプルなヘッダーって感じです。
今回はこのheader部分を固定します。
HTML
<header id="top-head"> <div class="inner"> <h1 class="logo">Fixed Navi</h1> <nav id="global-nav"> <ul> <li><a href="#">HOME</a></li> <li><a href="#">PRODUCT</a></li> <li><a href="#">WORKS</a></li> <li><a href="#">COMPANY</a></li> <li><a href="#">CONTACT</a></li> </ul> </nav> </div> </header>
jQuery
jQueryはスクロールすると header に fixed クラスを割り当てるだけです。
アニメーションはCSSで行います。
JavaScript
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script> (function($) { $(function() { var $header = $('#top-head'); $(window).scroll(function() { if ($(window).scrollTop() > 50) { $header.addClass('fixed'); } else { $header.removeClass('fixed'); } }); }); })(jQuery); </script>
CSS
CSSはファーストビューのナビゲーションを普通に作って、jQueryで指定したクラス(fixed)で固定される狭いナビゲーションの2種類を作ります。
あとは変化のあるセレクタに transition を指定するだけです。
CSS
/* header *//* header */ #top-head { position: fixed; width: 100%; margin: 0 auto; padding: 30px 0 0; line-height: 1; } #top-head:after { content: ""; display: block; height: 1px; background: #fff; width: 980px; margin: 30px auto 0; } #top-head a, #top-head { color: #fff; text-decoration: none; } #top-head .inner { position: relative; } #top-head .logo { float: left; font-size: 32px; } #global-nav ul { list-style: none; position: absolute; right: 0; bottom: 0; font-size: 14px; } #global-nav ul li { float: left; position: relative; } #global-nav ul li a { padding: 0 30px; } /* transition */ #top-head, #top-head:after, #top-head .logo, #global-nav ul li, #global-nav ul li a { transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; } /* Fixed */ #top-head.fixed { padding-top: 15px; background: rgba(255,255,255,.7); } #top-head.fixed .logo { font-size: 24px; color: #333; } #top-head.fixed:after { width: 100%; margin-top: 20px; } #top-head.fixed #global-nav ul li a { color: #333; padding: 0 20px; }
COMMENTS
タカダ 2016-12-02 17:45
初めまして。
こちらのメニューに、スマホでハンバーガーメニューにすることも、可能でしょうか?
http://www.webopixel.net/javascript/1060.html
こちらの記事にあるように、スマホ用の記述をすればいいだけでしょうか?
スクロールした時のアニメーションはこちらの方が理想なので、
これでハンバーガーメニューになったら大変ステキです。
お手数ですがご教授ください。
webOpixel 2016-12-09 14:22
基本的にここのをベースにしているので、スマホ用を追記するだけで大丈夫だと思います。
mkr 2017-10-12 14:27
はじめまして。
こちらのメニューを孫階層までの多階層にすることは可能でしょうか。
スクロール時のアニメーションが上の方と同じくこちらのものが理想に近いので
ご教示いただければ幸いです。
ナカヤマ 2018-06-22 19:16
初めまして。
現在職業訓練で勉強中の身なのですが、こちらで解説されているナビゲーションがとてもオシャレで目に止まりました。
もしよろしければ、制作実績(就活用の架空サイト)にこちらのナビゲーションを取り入れてみたいのですが、使用してもよいでしょうか?
お忙しいとは思いますが、ご回答いただければ幸いです。
webOpixel 2018-06-26 12:58
> ナカヤマさん
コメントありがとうございます。
ソースに関しては自由に使って頂いて大丈夫です。
勉強がんばってください!
ナカヤマ 2018-06-27 22:10
ご返信ありがとうございます。
激励まで頂いてとても嬉しいです!
ステキなサイトを作れるように、勉強がんばります!