なんだか最近あつくなったり寒くなったりなんなんでしょうね…
自律神経がおかしくなって体調崩す方も多いそうなので、みなんさもお気をつけください。

今回は『ある一定の場所まできたらナビゲーションを上部に固定する』方法です。
これ、めちゃ初期のころやるやつなんですけど、結構つまずいた記憶があって…
普通にスクロースしたらナビゲーション固定はできるのに、キービジュアルのしたにナビゲーションがある場合だと
うまくいかなかったりしたので備忘録的にかいておきます。

まずは実装から！

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});

    }
  });
}
});

特に細かい解説はいらないかなと思います！
ぜひコピペして使用してみてください！

• blog,
• code,
• css3,
• web