スクロール値に応じて、ヘッダーがぬるっと現れて固定される動きを実装します。
目次
【ヘッダーを固定する】 position:fixed;
まずは、ヘッダーのHTMLをCSS書く。
<header class="header"><nav class="header-nav"> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Works</a></li> <li><a href="#">Contact</a></li> <li><a href="#">Blog</a></li> </ul> </nav> </header>
header.header{
padding-top: 1%;
transition: .5s;
/*ナビ部分のCSS*/
nav.header-nav{
width: 100%;
ul{
display: flex;
justify-content: flex-end;
padding-right: 2%;
li{
margin-left: 30px;
a{
text-decoration: none;
position: relative;
display: inline-block;
/*ナビ部分の文字にマウスを置いたらアンダーラインが入るアニメ*/
&::after{
position: absolute;
bottom: -4px;
left: 0;
content: '';
width: 100%;
height: 2px;
background: $conceptColor;
transform: scale(0, 1);
transform-origin: right top;
transition: transform .3s;
}
&:hover::after{
transform-origin: left top;
transform: scale(1, 1);
}
}
}
}
}
}
ここまでのコードは、ページにきた時に一番上にある状態のヘッダーのコードです。
今回は、これをスクロールさせたときに、一旦は上に隠れて、
一定の位置までスクロールすると、上から再度ぬるっと出てくるように実装します。
【スクロールしたらクラスを付与する】
今回は、jQuery を使います。
<head> </head>内に CDN を書きます。
<script src="https://cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js"></script>
次は、jQueryのコードです!
</body> の上あたりに<script> </script>で囲んで書きます。
<script>
//ヘッダー固定・解除
//window(画面)の、scrollTop(スクロール量が一番上から数えて、10より大きくなったら)
//headerという名のクラスのcssをtop: -80px に変更する (上にずらしてる)
$(window).scroll(function(){
if ($(window).scrollTop() > 10) {
$('.header').css({"top":"-80px"});
}
//window(画面)の、scrollTop(スクロール量が一番上から数えて、750より大きくなったら)
//headerという名のクラスに、addClass(クラスを加える)、'fixed 'という名の
//headerという名のクラスのcssをtop: 0px に変更する
if ($(window).scrollTop() > 750) {
$('.header').addClass('fixed');
$('.header').css({"top":"0px"});
}
//window(画面)の、scrollTop(スクロール量が一番上から数えて、10より小さくなったら)
//headerという名のクラスに、removeClass(クラスを外す)、'fixed 'という名の
if ($(window).scrollTop() < 10) {
$('.header').removeClass('fixed');
}
})
</script>
↑コメントの通りの、じっくり見れば、簡単なことを指示しています。
つまり、一定のところまで、スクロールされたら、クラスを付与しろという命令文ですね。
何か動きをつけたい時の考え方は、このパターンが多いです。
普通の状態と、
変化後の状態を、
区別するためには、変化後には、○○っていうクラスがあるようにして、
クラスがある場合は、こうする。無い場合は、こうする。
ていう風に、イメージして、コードを組みましょう。
【変化後のCSSを書く】
一定までスクロールした時に「header」というクラスを持つ要素に「fixed」というクラスを付けとけよ!と命令したので、
スクロールした時には、HTMLのコードはこう書き変わります
<header class="header fixed"> <!-- クラス fixedが追加される -->
<nav class="header-nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Works</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Blog</a></li>
</ul>
</nav>
</header>
CSSも、fixedというクラスがついた状態のCSSを書きます
header.header.fixed{
display: flex;
align-items: flex-end;
width: 100%;
padding:.5% 5%; /*余白調整--------------*/
position: fixed; /*固定する--------------*/
z-index: 1000; /*重なり順を最上層にする--------------*/
transition: .4s; /*変化にかかる時間--------------*/
border-bottom: $conceptColor solid 2px; /*枠の下線を入れる------------*/
background-color: rgba($color: #ffffff, $alpha: .7); /*背景色---*/
}
fixedというクラスがついた場合の、SCSSです。
このようにクラスの有無によって、スタイルを変更することで、条件に応じた変化を加えることができます。
【まとめ】
1、通常のヘッダーのHTML、CSSを書く
2、jQueryで、スクロールしたときに、ヘッダーにクラスを付与するコードを書く
3、クラスを付与されたヘッダーのCSSを書く
付与するクラス名は自由ですので、わかりやすいものにしましょう!