スクロールでclass名付与後に画像を差し替える方法について

###前提・実現したいこと

HTML,CSS,jqueryを使用してページ上部に固定してあるナビゲーションが、スクロールされた時にナビゲーションの背景色が白から黒へ変わる様にしています。ヘッダーは固定のままでスクロール前からスクロール後に文字色も反転します。

スクロールにクラスを付与する事で実現をしているのですが、この際にヘッダー内に含まれた画像をスクロール後に違った画像へ切り替えたいと考えています。が、方法がわかりません。

方法が浮かばずに、質問させていただきました。

###該当のソースコード

<header id="header" class="header">
       <div class="header-wrap">
           
           <div class="logo-box">
                <a href="<?php bloginfo('url'); ?>"><img src="<?php echo get_stylesheet_directory_uri() ?>/img/logo.png" alt="ロゴ" /></a>
           </div>


           <div class="gnavi">
              <ul>
              <li><a href="<?php bloginfo('url'); ?>/about">ABOUT</a></li>
              </ul>
           </div>



     <!-- end . --></div>
<!-- end #header --></header>

<script>
$(function(){
 var header = $('#header')
 header_offset = header.offset();
 header_height = header.height();
  $(window).scroll(function () {
   if($(window).scrollTop() > header_offset.top + header_height) {
    header.addClass('scroll');
   }else {
    header.removeClass('scroll');
   }
  });
});
</script>

###試したこと
javascript等に関しての知識は乏しいです。

行動規範の内容に同意します

回答1件

ベストアンサー

既存のコードをなるべく合わせて書きました。

php
1<img src="<?php echo get_stylesheet_directory_uri() ?>/img/logo.png" data-replace="<?php echo get_stylesheet_directory_uri() ?>/img/logo-b.png" alt="ロゴ" />

javascript
1$(function(){
2 var header = $('#header');
3 var logo = header.find('[data-replace]');
4 var defaultSrc = logo.attr('src');
5 header_offset = header.offset();
6 header_height = header.height();
7  $(window).scroll(function () {
8   if($(window).scrollTop() > header_offset.top + header_height) {
9    logo.attr('src', logo.data('replace'));
10    header.addClass('scroll');
11   }else {
12    logo.attr('src', defaultSrc);
13    header.removeClass('scroll');
14   }
15  });
16});