なんだか最近あつくなったり寒くなったりなんなんでしょうね…
自律神経がおかしくなって体調崩す方も多いそうなので、みなんさもお気をつけください。
今回は『ある一定の場所まできたらナビゲーションを上部に固定する』方法です。
これ、めちゃ初期のころやるやつなんですけど、結構つまずいた記憶があって…
普通にスクロースしたらナビゲーション固定はできるのに、キービジュアルのしたにナビゲーションがある場合だと
うまくいかなかったりしたので備忘録的にかいておきます。
まずは実装から!
See the Pen ある一定の場所まできたらナビゲーションを上部に固定する by sayuri (@giraffeweb) on CodePen.0
ソースはいたって簡単!
<div id="key_wrap"> <div class="key fotorama"> <img src="https://creatornote.nakweb.com/wp-content/themes/giraffe/images/cssfullslide/slide01.jpeg" alt="key"> <img src="https://creatornote.nakweb.com/wp-content/themes/giraffe/images/cssfullslide/slide03.jpeg" alt="key"> <img src="https://creatornote.nakweb.com/wp-content/themes/giraffe/images/cssfullslide/slide05.jpeg" alt="key"> </div> <!-- キービジュアル --> </div> <header> <nav class="nav"> <div class="inner"> <div class="menu"> <ul class="main_menu flexbox fww"> <li><a href="#">menu01</a></li> <li><a href="#">menu02</a></li> <li><a href="#">menu03</a></li> <li><a href="#">menu04</a></li> <li><a href="#">menu05</a></li> </ul> </div> </div> </nav> </header> <!-- header --> <section class="wrap"> <div class="box box01">box01</div> <div class="box box02">box02</div> <div class="box box03">box03</div> </section>
* { margin: 0; padding: 0; } li { list-style: none; } a { text-decoration: none; } .inner{ width:96%; padding:0 2%; max-width:1280px; margin:auto } .fixed{ position:fixed; top:0; width:100%; z-index:10000 } header{ background-color:#fff; width:100%; clear:both; border-bottom:1px solid #ddd } #sub_header{ width:96%; overflow:hidden; margin:auto; padding:10px 0; clear:both } .nav ul li a{justify-content:center} .nav .main_menu>li{ text-align:center; padding:10px 0} .menu{width:100%} .menu div{align-self:center} .main_menu{ width:100%; } .nav ul.main_menu>li { flex: 2; } .main_menu li a:hover{color:#E48F15} .key{ clear:both; width:100%; margin:auto; position:relative; padding-top:2px; } .key:before{ content:""; display:block; position:absolute; top:0; left:0; overflow:hidden; width:100%; height:2px; background:-webkit-linear-gradient() to right,#24c6dc,#1b7ab7; background:-o-linear-gradient() to right,#24c6dc,#1b7ab7; background:linear-gradient() to right,#24c6dc,#1b7ab7; background:-webkit-linear-gradient() to right,#24c6dc,#1b7ab7; background:-o-linear-gradient() to right,#24c6dc,#1b7ab7; background:linear-gradient() to right,#24c6dc,#1b7ab7 } .fotorama__nav-wrap{ position:absolute; bottom:10px; left:0; z-index:30 } .fotorama__dot{ display:block; width:6px; height:6px; position:relative; top:12px; left:6px; border-radius:6px; border:1px solid #fff } .fotorama__nav__frame.fotorama__active .fotorama__dot{ border-width:4px } .flexbox { display: flex; } .wrap { width: calc(100% - 80px); height: 300vh; background-color: #ddd; padding: 40px } .box { background-color: #bbb; padding: 200px 0; text-align: center; margin-bottom: 60px; }
$(function () { window.onload = function() { var topbar = $("header").offset().top; $(window).scroll(function() { if($(window).scrollTop() > topbar) { $("header").css({"position": "fixed", "top": "0","z-index": "10000" }); $("#key_wrap").css({"position": "relative", "top":"50px"}); } else { $("header").css("position", "static"); $("#key_wrap").css({"position": "relative", "top": 0}); } }); } });
特に細かい解説はいらないかなと思います!
ぜひコピペして使用してみてください!