スクロールしてグローバルナビが隠れそうになったときに画面の上部に固定する方法です。
グローバルナビの位置までスクロールしたら、JavaScriptで位置を固定するクラスを追加します
Source
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <div class="mainImg">メインイメージ</div> <nav class="fixAlpha"> <ul> <li><a href="#">Menu1</a></li> <li><a href="#">Menu2</a></li> <li><a href="#">Menu3</a></li> <li><a href="#">Menu4</a></li> <li><a href="#">Menu5</a></li> <li><a href="#">Menu6</a></li> <li><a href="#">Menu7</a></li> </ul> </nav> <div class="contents" style="height: 1500px;"> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 | /* ==================================================== グローバルナビゲーションのスタイル ==================================================== */ body { background: url(backgroundImage.jpg); padding: 0; } .mainImg { background:url(mainImage.jpg) !important; background-size:cover; /** グローバルナビの位置 **/ height: 300px; } .fixAlpha { background: #000000; } .fixAlpha li { float: left; width:14.28571428571429%; border-right: 1px solid #ffffff; } .fixAlpha li:last-of-type{ border-right: 0; } .fixAlpha a { display: block; padding: 0.75em 0; text-decoration: none; text-align: center; color: #ffffff; } /** グローバルナビを画面の上の部分にくっつける **/ .fixed ul { border: 1px solid red; position: fixed; top: 0; left: 0; z-index: 90; width: 100%; background: rgba(0,0,0,0.5); } |
1 2 3 4 5 6 7 8 9 10 11 12 13 | $(document).ready(function(){ $(function() { $(window).scroll(function () { if ($(this).scrollTop() > 300) { /** 画面の上部がグローバルナビを越えたらクラスfixedをつける **/ $('.fixAlpha').addClass("fixed"); } else { /** 画面の上がグローバルナビを越えていなければクラスfixedをつけない **/ $('.fixAlpha').removeClass("fixed"); } }); }); }); |
簡単なJavaScriptを使うだけでやれることが増えるんですね。
これを応用するといろいろ面白い動きができそうです。