見出し画像

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

S.A.P.Studio

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

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

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

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


【全体の流れ】

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

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

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

４、微調整！　以上完成！


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

まずは、ヘッダーのHTMLをCSS書く。

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：「この門を通りたければ、伝説の剣を持ってこい」

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

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

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

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

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

の会話文を表示。

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

門番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;　で制御しています、

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

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


【まとめ】

流れはこうです！

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

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

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


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


【関西人の方へ】

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

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


「551の豚まんがある時ぃ！」

一同「わーはははっは！」（笑声）


「無い時⤵︎⤵︎」

一同「・・・・・」（沈黙）


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

551の豚まんがある時に

addClass('butaman')

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

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

笑う！！　


無い時⤵︎⤵︎に

removeClass('butaman')

butamanというクラスを無くす

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

沈黙・・・


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

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

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

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

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

思います！

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

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

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

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


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







この記事が気に入ったらサポートをしてみませんか？