特定のスクロール量ごとに色を変化させるスクリプト

Question

javascriptを使って、一定のスクロール量（300px）ごとに、固定ヘッダーのロゴの文字が、七色に変化するようなアクションをさせたいです。

スクロール量が

・初期状態　赤
・300pxで　橙
・600pxで　黃
・900pxで　緑
・1200pxで　青
・1500pxで　藍
・1800pxで　紫

で、1800pxスクロールすると7色目に到達、次の300px（＝2100px目）では最初の「赤」に戻って、スクロール出来る限り「七色の変化が永久ループする」といった具合です。

ググってみても、特定のスクロール量ごとに色を変化させる方法が見つからなかったので、自分でも考えてみたのですが、例えば、

.color_1～.color_7の7つのクラスを用意して、スクロール量100pxごとに、クラス末尾の数字を1つカウントアップさせて、それをロゴ要素に付与する、という感じです。これを踏まえて、以下のようなコードを書きました。

<div style="height:20000px;">
	<div id="logo" class="color_1">test</div>
</div>

#logo { position: fixed; left: 0; top: 0;}
.color_1 { color: #c00;}
.color_2 { color: #FF8E00;}
.color_3 { color: #F0FF00;}
.color_4 { color: #00FF05;}
.color_5 { color: #1015FF;}
.color_6 { color: #214A4E;}
.color_7 { color: #8C15FF;}

var scroll;
var current;
var count = 1;

$(window).scroll(function(){
	scroll = $(window).scrollTop();
	current = (scroll % 300);

	// もし、スクロール量が300pxになったらクラスのカウントを１つアップさせて、ロゴ要素に（現在のクラスを削除後に）カウントアップさせたクラスを付与。※クラスのカウントが7だった場合は、1に戻す
	if (current == 0) {
		if (count < 7) {
			count++;
			$('#logo').removeClass().addClass('color_' + count);
		}
		else if(count == 7) {
			count = 1;
			$('#logo').removeClass().addClass('color_' + count);
			
		}
	}
});

上記コードで、思っていた通りの動きは出来たのですが、３つの課題が出てきました。
それは、

・スクロールが止まるまで、スクリプトが実行されない
・スクロールが止まった時点で、300で割り切れないスクロール量の位置だと、スクリプトが実行されない
・スクロールを上に戻していく場合は、color_のクラス名をカウントダウンして戻していきたいが出来ない

です。

これをどう解決すればいいのか、ご教示いただけると幸いです。
よろしくお願いいたします。

●追記

上記の確認方法についてですが、

・chomeで上記コードを記述したページを表示
・Windows環境で、F12ボタン→開発者ツールを開いてコードが変わる様子を監視
・スクリプトに、$('p').text(scroll); を追加して、スクロール量を画面にリアルタイムで表示させるようにした

という環境でおこないました。

スクロール中もスクロール量の値は随時変動しているのは見れたのですが、.color_のクラスが付与、切り替わるタイミングは、スクロールが止まった時に「300で割り切れた場合のみ」でした。要は、自分が書いているスクリプトが「スクロールが止まった時点で行われる」ということは認識しております。

なので、リアルタイムにそれを処理する方法があるのかと思い、その解決策があればご教示いただきたい次第です。

●追記 21/09/24 09:24
m.ts10806さんにご教示いただいた内容を元に、「直前のscrollTopの位置」と「現在のスクロールの位置」を比較して、上下の判定を行い、カウントをアップ/ダウンさせるスクリプトを書いてみました。

var posBefore;
var posAfter;
var current;
var count = 1;
var color = 1;

posBefore = $(window).scrollTop();
	
$(document).on("scroll",$(window),function(){
	posAfter = $(this).scrollTop();
		
	// スクロール開始位置がスクロール後より大きい
	if (posAfter < posBefore) {
		console.log('うえ'); /* チェック用 */
		current = (posAfter * 300);

        	if (color > 1) {
        	    $('#logo').removeClass().addClass('color_' + color);
        	    color--;
        	}
        	else if(color == 1) {
        	    $('#logo').removeClass().addClass('color_' + color);
        	    color=7;
        	}
	// スクロール開始位置がスクロール後より小さい
	}else{
		console.log('した'); /* チェック用 */
		current = (posAfter * 300);

		if (color < 7) {
			$('#logo').removeClass().addClass('color_' + color);
			color++;
		}
		else if(color == 7) {
			$('#logo').removeClass().addClass('color_' + color);
			color=1;
		}

	}

	//開始位置をスクロール後の位置に書き換える
	posBefore = posAfter;
});

ただし、ご教示いただいた内容のうち、以下部分が理解できておらず、

current = (count * 300); 

上下にスクロールさせる際、スクロール量の増減、color_の増減は出来ているっぽいのですが、300pxごとの変化が出来ず、もっと狭いスパンでcolor_の値が変化していってる状態でした。。

Comments

[m.ts10806]

1つ目と2つ目は原因同じでは。
実行されないわけではなく、そういう仕様なのでは？（割り切れないと何も処理が書いてない）
「実行されない」はどのように確認したのですか？

[waon]

ありがとうございます。

>「実行されない」はどのように確認したのですか？

・chomeで上記コードを記述したページを表示
・Windows環境で、F12ボタン→開発者ツールを開いてコードが変わる様子を監視
・スクリプトに、$('p').text(scroll); を追加して、スクロール量を画面にリアルタイムで表示させるようにした

です。

スクロール中もスクロール量の値は随時変動しているのは見れたのですが、.color_のクラスが付与、切り替わるタイミングは、スクロールが止まった時に「300で割り切れた場合のみ」でした。

要は、自分が書いているスクリプトが、スクロールが止まった時点で行われる、ということなんですよね。なので、リアルタイムにそれを処理する方法があるのかなぁ、と思い、その解決策があればご教示いただきたかった、という次第です。

[m.ts10806]

質問は編集できるので適宜追記してください。

[waon]

なるほど、ありがとうございます。
理解不足でお手数をお掛けしました。

Answer 1

計算で色番号を算出して前回と異なれば書き換えるでいいんじゃないの？

        let precolor = 0;
        $(window).scroll(function () {
            scroll = $(window).scrollTop();
            color = (Math.floor(scroll / 300) % 7) + 1;

            //デバッグ用
            $('#logo').text('test:' + scroll + '(' + color + ')');

            if (precolor !== color) {
                $('#logo').removeClass().removeClass('color_' + precolor);
                $('#logo').removeClass().addClass('color_' + color);
                precolor = color;
            }
        });

Answer 2

スクロール量って1回で結構行くので、その点だけを判定とすると難しいと思います。
「～以降」くらいで幅を持たせた方が良いでしょうね。

例えば

    current = (count * 300);

    if (scroll > current) {

ただこれだけだと2100以降は300単位じゃなくても変わり続けるので微妙なところはあるのですけど。
カウント用とカラー用を分けた方がいいかもしれません。

var scroll;
var current;
var count = 1;
var color = 1;

$(document).on("scroll",$(window),function(){
    scroll = $(window).scrollTop();
    current = (count * 300);
    if (scroll > current) {
            count++;
        if (color < 7) {
            $('#logo').removeClass().addClass('color_' + color);
            color++;
        }
        else if(color == 7) {
            $('#logo').removeClass().addClass('color_' + color);
            color=1;
        }
    }
});

あとは、「直前のscrollTopの位置」と「現在のスクロールの位置」を比較すれば上がってるか下がってるか判定できますので、カウントを戻していく。
ただ「上げるとき」はscroll > currentの判定条件を逆にする必要があります。

Comments

[waon]

回答ありがとうございます！
スクリプトを記述したら、下スクロールの動きがほぼ希望通りの動きになりました。

ご教示いただいた内容をしっかり理解できていないのですが、「直前のscrollTopの位置」と「現在のスクロールの位置」を比較して、上下の判定をする方法を取り入れたスクリプトを追記しました。

ただ、追記に記載しておりますが、一部コードの理解が足りず、、中途半端な感じになっていますよね。。
current = (count * 300)というのは、どういった動きになるのでしょうか？

試しに、countの値を$('p').text(count);などで表示させてみたのですが、count自体は何も値を持っていない？？ようでした。