見出し画像

【WEB制作】 スクロールでヘッダー固定 サラリーマン投資家のFIREへの旅路 第76夜

本日は、ポートフォリオ作成の続きです! 

スクロール値に応じて、ヘッダーがぬるっと現れて固定されるの実装の巻

(関西人の方には、特にわかりやすい解説を最後に追加。)

↓ こんなん! ( ちょっとデザイン変えました )


【全体の流れ】

1、ヘッダーのhtml 、cssを書く

2、jQuery でスクロールしたクラス付与するコードを書く

3、クラスが付与された時の、ヘッダーのCSSを書く

4、微調整! 以上完成!


【ヘッダーを固定する】   position:fixed;

まずは、ヘッダーのHTMLCSS書く。

HTML


<!--header---------------------------------------------->
<header class="header">
 
 <h1>S.A.P.design</h1>
 
 <nav class="header-navi">
   <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>

SCSS

/*header ---------------------------------------------*/
   header.header{
     width: 90%;
     margin: 0 auto;
     padding-top: 1%;
     transition: .5s;
     display: flex;
     align-items: flex-end;
      
 /*ナビ部分のCSS*/
     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:$textColor;
             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);
             }
           }
         }
       }
     }
   }

ここまでのコードは、ページにきた時に一番上にある状態

ヘッダーのコードです。

今回は、これをスクロールさせたときに、一旦は上に隠れるけど、

一定の位置までスクロールすると、上から再度ぬるっと出てくる

ようにします!

↓ こんな感じね!

では、次は、

一定の場所までスクロールした時に、現れる」を実装する必要が

あります。 こういうのは、大抵、JavaScript先生です!


【スクロールしたらクラスを付与する】

今回は、jQuery を使います! 代表的なjavaScriptのライブラリです!

なので、<head> </head>内に CDN を書いてね!

<script src="https://cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js"></script>

↓ CDN、ライブラリの説明は、こちら(噛み砕きすぎな説明)↓

次は、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>

↑  コメントの通り! じっくり見れば、簡単なことを指示しています。

つまり、一定のところまで、スクロールされたら、クラスを付与しろ

という命令文ですね。

何か動きをつけたい時の考え方は、このパターンが多いです。

普通の状態と、

変化後の状態を、

区別するためには、変化後には、○○っていうクラスがあるように

して、

クラスがある場合は、こうする

無い場合は、こうする

ていう風に、イメージして、コードを組めばオッケー!

昔、RPGツクールっていうゲームがあって、RPGを作るゲーム

やったんやけど、そこで、「ゲームスイッチ」ってのが

ありました。

これは、例えば、

伝説の剣」を持っている時には、

門番A:「伝説の剣を持っているな、通っていいぞ

持っていない時には

門番A:「この門を通りたければ、伝説の剣を持ってこい

という分岐を作りたい時に、

伝説の剣を手に入れた時に「ゲームスイッチ1」をオン と設定。

門番Aの会話の条件分岐として、

ゲームスイッチ1」がオンの時は、

門番A:「伝説の剣を持っているな、通っていいぞ

の会話文を表示。

ゲームスイッチ1」がオフの時は、

門番A:「この門を通りたければ、伝説の剣を持ってこい

の会話文を表示。

という風に、「剣を持っているかどうかをコンピュターにわからせるため

コンピューターが理解できる「ゲームスイッチ」がオンかオフか

条件を分岐できたわけです!

これと同じで、クラスが付与される条件を設定し、そのクラスがあれば

これを実行する。

なければ、実行しない

という風に、コンピューターにわかるように説明してあげるわけです。

コンピューターは、賢すぎるが故に、バカですから、

いい感じにして」は、通用せんのです!!

「いい感じ」とは、こうでこうでこうでこうで、詳しく説明する必要

あるのです! 

これが、つまりは、コーディングですな!



【変化後のCSSを書く】

話がそれました!

続いて、この

一定までスクロールした時に「header」というクラスを持つ要素に

fixed」というクラスを付けとけよ!と命令したので、

スクロールした時には、HTMLのコードはこう書き変わります


<!--header---------------------------------------------->
<header class="header fixed">    <!-- クラス fixedが追加される -->
 
 <h1>S.A.P.design</h1>
 
 <nav class="header-navi">
   <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 fixed---------------------------------------------*/
   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); /*背景色---*/
   }

こんな感じです!一番上に貼ったSCSSから、色々追加してあったり、

変更してあったりです!

つまり、fixedというクラスがついた場合は、このように変更します!

ということですね。

この辺を意識してみると、裏で動くコードが見える!!(見えない)


上から、降りてくるように見えるには、

jQueryの中で、要素の位置を「top : -80px

と指定したからです。

10以上スクロールしたら、

ヘッダーの位置が、本来の位置から-80pxのところに

移動してて、

750以上スクロールしたら、

ヘッダーの位置が、top:0 (本来の位置)になるように書いているので、

上から降りてきて、本来の位置に戻ってきます。

この時間をcssのtransition: .4s; で制御しています、

ここの数字を大きくすれば、よりゆっくりと降りてくるので、

ストレスフルなサイトを作るには、大きくしましょう!!


【まとめ】

流れはこうです!

1、通常のヘッダーのHTML、CSSを書く

2、jQueryで、スクロールしたときに、ヘッダーにクラスを付与するコードを書く

3、クラスを付与されたヘッダーのCSSを書く


付与するクラス名は自由ですので、わかりやすいものにしましょう!


【関西人の方へ】

先ほど、RPGツクールの例を出しましたが、

関西人の方には、こちらの方がわかりやすいかな。


551の豚まんがある時ぃ!」

一同「わーはははっは!」(笑声)


無い時⤵︎⤵︎

一同「・・・・・」(沈黙)


これこそまさに、条件分岐!

551の豚まんがある時

addClass('butaman')

butamanというクラスを付与する!

butamanというクラスが付与されているとき

笑う!! 


無い時⤵︎⤵︎

removeClass('butaman')

butamanというクラスを無くす

butamanというクラスがついていないとき

沈黙・・・


細かく考えると、ちょっと違うねんけども、

考え方としては、こうです!

何か、実装したことが出てきたら、ググるにしても

こうやったらできそうだとか、考え方を知っているとかで

ググり方も変わってくるし、より速く、最適解に辿り着けると

思います!

そして、このググって実装してきたことを、組み合わせれば、

オリジナルなものになっていくと思うのです!

0 → 1 は、天才にお任せして、

1 → ∞ に、力を注ぎましょう!!!!


我々は、農家ではなく、料理人を目指すのであります!







この記事が気に入ったら、サポートをしてみませんか?
気軽にクリエイターの支援と、記事のオススメができます!
また見てくださいね♪
●京都市在住の滋賀県人 ●サラリーマン(営業職) ●会社はブラック ●嫁、3歳の子どもと3人家族 ●独学にてHTML , CSS , JavaScriptを学習 ●仲間とWeb関連の事業を形にすべく、奮闘中 ●好き(エヴァ、映画、ラジオ、ゲーム)