ある一定の場所まできたらナビゲーションを上部に固定する

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

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

まずは実装から！

ソースはいたって簡単！

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
<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>
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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
* {
  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;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
$(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});
 
    }
  });
}
});

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

Share: