【HTML CSS 独学6】 基礎を固めて高く積み上げ！「jQueryでスクロール値に応じた動きをつけてみる」　投資家のFIREへの旅路 第234回

画面スクロールに応じて、バーが可変するエフェクトを作りました。

使うのは、HTML・CSS・jQueryです。

動きはこんな感じです！

このように、どのくらいスクロールされてたかを見張るコードがあって、そのスクロール値によって、要素に新たなclassを付与することで、このようなエフェクトを作っています。

詳しく見ていきましょう！

HTML

<h1 class="blog-category-title"> Web Design </h1>

CSS

    .blog-category-title {
     width: 100%;
     position: absolute;
     top: 8%;
     color: white;
     z-index: 1000;
     padding: .5%;
     background-color: #3c7cb8;
     transition: 1s;
     text-align: center;
   }
   
   
    .blog-category-title.fixed {
     width: 20%;
     position: fixed;
   }

jQuery

$(window).scroll(function() {
 
   if ($(window).scrollTop() < 10) {
     $('.blog-category-title').removeClass('fixed');
   }
   
   if ($(window).scrollTop() > 10) {
     $('.blog-category-title').addClass('fixed');
   }

 });

【解説】

・HTML

<h1 class="blog-category-title"> Web Design </h1>

HTMLは１行です。<h1>タグに、blog-category-titleというclassをつけています。ここは任意のclass名にしてください。

そして、Web Design という文字を表示させるようにしています。

・CSS　

CSSは２つあります。
それは、スクロールする前のスタイルと、
スクロール後のスタイルを指定するためです。

スクロール前のCSSはこちら

CSS ①

    .blog-category-title {
     width: 100%;
     position: absolute;
     top: 8%;
     color: white;
     z-index: 900;
     padding: .5%;
     background-color: $title-Color2;
     transition: 1s;
     text-align: center;
   }

このコードが、スクロールした後は、太字部分を下記のように変更します。

CSS ②

   .blog-category-title.fixed {
     position: fixed;
     width: 20%;
   }

widthを、
100%　→　20%　に変更

positionを
absolute　→　fixed　に変更

そして、もう一つのポイントは、
CSS ② には、
.blog-category-title の後に、.fixed　がついています。

つまり、スクロールしたら、fixedというclassを追加して、スクロール後にだけ、CSS②を適用させるということです。

この場合、CSS①と②で、共通の点については、②に書く必要はありません。

逆に、色を変えたい場合などは、
CSS②に新たに、background-colorを設定すれば、スクロール後に、色が変化するようにもできます。

では、このスクロールしたかどうかを判定するコードがこちら！

・jQuery

$(window).scroll(function() {

　if ($(window).scrollTop() < 10) {
　　$('.blog-category-title').removeClass('fixed');
　}
   
　if ($(window).scrollTop() > 10) {
　　$('.blog-category-title').addClass('fixed');
　}

 });

上から順に見ていきましょう！

＜その１＞

$(window).scroll(function() {　

・
・
・
・

});

このコードは、「window（画面）がscroll（スクロール）された時に実行する処理」という意味です。functionというのは、関数を意味します。
関数という表現がわかりにくいので、嫌いですので、
別の表現をすると、機能ですね！　

つまり、
$(window).scroll(function() {
});
内に、画面がスクロールされた時にやってほしいことを書くよ！
と、宣言しているわけです。

＜その２＞

if ($(window).scrollTop() < 10) {
　　$('.blog-category-title').removeClass('fixed');
　}

次のコードは、分解して読めば簡単！

if　

・・・「もしも」

 ($(window).scrollTop() < 10) {　　

・・・「画面スクロール値が10未満なら」

$('.blog-category-title').removeClass('fixed');

・・・「.blog-category-titleというclassのついた要素から、fixedというclassを削除(remove)してください。」
}

まとめると、
「もし、スクロール値が１０未満になったら、.blog-category-titleというclassのついた要素から、fixedというclassを削除(remove)してください。」

このように指令を出しています。

＜その３＞

二つ目のコードも同じようなことをしています。

　if ($(window).scrollTop() > 10) {
　　$('.blog-category-title').addClass('fixed');
　}

先程と違う点は、
<10　でなく、 >10であるところと、
removeClassでなく、addClassであるところ！

もう、お分かりですね！

このコードでは、
「もし、スクロール値が１０以上になったら、.blog-category-titleというclassのついた要素から、fixedというclassを追加(add)してください。」

という意味になります。

このコードによって、スクロール値が、10を超える＝10スクロールすると、"fixed"というclassが"blog-category-title"というclassを持つ要素に追加されてます。

そうすると、
CSS②で指定していたスタイルが、適用される流れになります。

【まとめ】

jQueryを使って、スクロール値に、応じて、スタイルを変えることで、
ユーザーの操作に合わせた処理がでいるようになりました。

このような、エフェクトは、面白いですよね！

自分の思ったように動いてくれると、さらに楽しい！！

今回のやり方を応用すれば、
もっと、いろいろなエフェクトを作ることができます。

根幹となる仕組みは、シンプルです。

基本のCSSと、変化後のCSSを用意する。

基本のCSSと、変化後のCSSをclassで区別する。

jQueryで、条件を指定し、変化後のclassを追加する。

これをどんどん応用していきましょう！！！