ヘッダーは固定し、画面をスクロールするとヘッダーの画像とテキスト・背景の色を変える設定をおこないたい。

Question

ヘッダーは固定し、画面をスクロールするとヘッダーの画像を変え、
同時にテキストの色と背景色を変えたいと考えています。

具体的には
スクロールが0のときは初期設定の画像・色のままですが、
スクロールが0を超えると画像・色が変化します。
逆にスクロールが0に戻ると画像・色も元に戻ります。

そして変化時間ですが、瞬時に変化するのではなく、
時間をかけて変化させたいのです。

そこで次のようなHTML、CSS、jQueryを書きました。

<header>
    <h1>
        <a href="">
            <img src="img/logo01.png" alt="">
            <span>タイトル</span>
        </a>
    </h1>
</header>
<div>
    メインコンテンツ
</div>

header {
  position: fixed;
  top: 0;
  left: 0;
  background: black;
  transition: 5s;
}

header.scroll {
  background: white;
}

a {
  color: white;
  transition: 5s;
}

.scroll a {
  color: black;
}

div {
  margin-top: -100px;
  height: 2000px;
  background: green;
}

$(function () {

    $(window).on('scroll', function () {

        if ($(this).scrollTop() > 0) {

            $('img').fadeOut(2500, function(){
                $('img').attr('src', 'img/logo02.png');
                $('img').fadeIn(2500);
            });

            $('header').addClass('scroll');
        } else {

            $('img').fadeOut(2500, function(){
                $('img').attr('src', 'img/logo01.png');
                $('img').fadeIn(2500);
            });

            $('header').removeClass('scroll');

        }
    });
});

けれどこのjQueryのコードだと、スクロールし続ける限り、延々と画像が点滅するんですね。

わたしとしては最初のスクロールのときだけ、
つまりスクロール量が0と1の間のときに変化が起きればいいだけなので、
このように延々と画像が点滅するのは望んでいません。

もしかしたらoffset()などを使ってコードを書けばいいのかもしれませんが、
書き方がよくわかりません。

また変化に関して気にしていることがあり、
私の書いたコードでは画像と色の変化が変化するタイミングが一致していません。
この画像と色の変化のタイミングを合わせたいのです。

書き方が分かる方がおられましたら、ご教授ください。
わたしの書き方と全く違う書き方でも構いません。

よろしくお願いします。

Answer 1

こんばんは。

このように延々と画像が点滅するのは望んでいません。

古典的ですが、ひとまずはフラグで管理してはいかがですか？

    var f = true;
//...
        if ( ( $(this).scrollTop() > 0 ) && f) {
//...
                f = false;
        } else if (($(this).scrollTop() == 0) && !f ) {
//...
                f = true;
//...
        }

---

この画像と色の変化のタイミングを合わせたい

イージングが合っていないのだと思います。

  transition: 5s linear;

Comments

[cheshire-cat]

ありがとうございます。flagというものに思い至りませんでした。
たしかにそういった目印があればうまくいきそうです。

けれどそう思って下記のコードを書いてみたのですが、うまくいきませんでした。
最初の0から1にスクロールしたときは変化するのですが、スクロールし続けるとやはり画像が点滅してしまいます。

またスクロールを0に戻したときも、元に戻りません。
おそらくflagのtrue,falseがうまく効いていないのだと思いますが、どうやって効かせればいいのかわかりません。

分かる範囲で教えていただけると助かります。

以下コード。

$(function () {

$(window).on('scroll', function () {

var f = true;

if ( ( $(this).scrollTop() > 0 ) && f) {

$('img').fadeOut(2500, function(){
$('img').attr('src', 'img/logo02.png');
$('img').fadeIn(2500);
});

$('header').addClass('scroll');

f = false;

} else if (($(this).scrollTop() == 0) && !f ) {

$('img').fadeOut(2500, function(){
$('img').attr('src', 'img/logo01.png');
$('img').fadeIn(2500);
});

$('header').removeClass('scroll');

f = true;
}

});

});

[Lhankor_Mhy]

var f = true;
↑これをイベントリスナの中に入れてしまうと、スクロールするたびにフラグがリセットされます。
ですので、リスナの外に置くべきです。

[cheshire-cat]

ありがとうございます。できました。お手数をおかけしました。