【HTML CSS 独学8】 基礎を固めて高く積み上げ！「スクロールに応じてトップにヘッダーナビを固定する」投資家のFIREへの旅路 第244回
スクロールしても追従するヘッダーを作ります。
動きとしては、ヘッダーが上に隠れて、その後にニュッと上から出てくるやつです！
【トップ固定ヘッダーナビ】
こんな感じ
↓
スクロールすると
↓
画面の上に隠れて
↓
また登場！
↓
【HTML】
<!--header---------------------------------------------->
<header class="header">
<h1><a href="#">S.A.P.Blog</a></h1>
<nav class="header-navi">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Concept</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Movie</a></li>
<li><a href="#">Investment</a></li>
<li><a href="#">WebDesign</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header><header>タグの中に、
<h1>タグで、ページのタイトルを書きます。
<ul>タグ、<li>タグを使い、ナビの部分を作ります。
【SCSS】
/header ---------------------------------------------/
header.header {
width: 90%;
margin: 0 auto;
padding: 0.5% 5% 1% 5%;
transition: 0.4s;
display: flex ;
align-items: flex-end;
h1 {
width: 100%;
a {
text-decoration: none;
color: #464242;
}
}
nav.header-navi {
width: 100%;
ul {
display: flex;
justify-content: flex-end;
padding-right: 2%;
li {
margin-left: 30px;
a {
font-size: 1em;
text-decoration: none;
color: #6a7072;
position: relative;
display: inline-block;
&::after {
position: absolute;
bottom: -4px;
left: 0;
content: "";
width: 100%;
height: 2px;
background: #928080;
transform: scale(0, 1);
transform-origin: right top;
transition: transform 0.3s;
}
&:hover::after {
transform-origin: left top;
transform: scale(1, 1);
}
}
}
}
}
}
/header fixed---headerを固定後のSCSS-----------------/
header.header.fixed {
width: 90%;
padding: 0% 5% 1.2% 5%;
position: fixed;
z-index: 1000;
transition: 0.2s;
border-bottom: $conceptColor solid 2px !important;
background-color: rgba($color: #ffffff, $alpha: 0.7);
}続いて、SCSSで、<header>のスタイルを指定していきます。
<haeder>の中に、<h1>と、<nav>が入っているので、これらを横並びになるように、
display:flex; を、<header>に指定します！
naviの作り方、display:flex; の使い方はこちらにあります！
もう一つのポイントは、
{ } です。
これは、headerというクラスと、fixedというクラスを持つ要素にスタイルしています。
つまい、固定後のheaderのスタイルです。
background-color: rgba($color: #ffffff, $alpha: 0.7); と指定しているので、
固定後のheaderは、透過させています。
このカラーを変えれば、固定後には、違う色のヘッダーにすることもできます。
【javaScript】
<script>
$(window).scroll(function() {
if ($(window).scrollTop() > 10) {
$('.header').css({
"top": "-60px"
});
}
if ($(window).scrollTop() > 250) {
$('.header').addClass('fixed');
$('.header').css({
"top": "0px"
});
}
if ($(window).scrollTop() < 50) {
$('.header').removeClass('fixed');
}
});
</script>次は、javaScriptです！
これは、スクロール値を見るものです。
これは本当に使い回せるので、キープしておきましょう！！
順番に見ていきましょう。
$(window).scroll(function() {
if ($(window).scrollTop() > 10) {
$('.header').css({
"top": "-60px"
});
}このブロックは、こういう意味です。
画面(window)の上からのスクロール値(scrollTop) が10以上 (> 10)の時、
headerというクラス名を持つ要素の位置を
上から(top) マイナス60px にする
つまり、スクロールしたら、一旦上に隠れるということ。
if ($(window).scrollTop() > 250) {
$('.header').addClass('fixed');
$('.header').css({
"top": "0px"
});
}こちらのブロックは、
画面(window)の上からのスクロール値(scrollTop) が250以上 (> 250)の時、
headerというクラス名を持つ要素に、fixedというクラス(Class)を付け加える(add)
headerというクラス名を持つ要素の位置を、上から(top) 0pxにする
つまり、
250以上スクロールしたら、トップに固定して、fixedというクラス名をheaderというクラスに付け加えるという意味。
この状態が、先ほどのSCSSの
{ } の状態です！！
if ($(window).scrollTop() < 50) {
$('.header').removeClass('fixed');
}
});最後のブロックでは、
スクロール値が、50未満になったら
headerというクラス名を持つ要素から、fixedというクラス名を外す(remove)
これで、一番上へスクロールして戻ってきた時に、
ヘッダーは、元の位置に戻ります。
【まとめ】
このような感じで、スクロールに応じて、ヘッダーを固定したら、しなかったりが可能になりました。
このjavaScriptのコードは、スクロール値に応じて何かをした時に、
応用ができるので
是非コピペして、保存しておきましょう！！！
この記事が気に入ったらサポートをしてみませんか？