Javascript 向下滚动JS/HTML/CSS wordpress网站时替换徽标图像

我想有一个标志图像的变化（颜色的目的）后滚动

当向下滚动以在导航栏后面有一个黑色条时，导航当前会发生变化。有人对什么最适合此图像替换有任何建议吗

我已经尝试过使用这个，正如在另一个SO问题中发现的那样，但对我不起作用

$(function(){
    $(window).scroll(function(){
        if($(this).scrollTop() > 100) {
            $('logo_h logo_h__img').fadeOut('slow');
            $('#logo-img img')
                .css({'width':'184px','height':'33px'})
                .attr('src','logo1.png');
        }
        if($(this).scrollTop() < 100) {
            $('logo_h logo_h__img').fadeIn('fast');
            $('#logo-img img')
                .css({'width':'184px','height':'60px'})    
                .attr('src','logo2.png');
        }
    });
});

$（函数（）{
$（窗口）。滚动（函数（）{
如果（$（this）.scrollTop（）>100）{
$（'logo_h logo_h_img'）。淡出（'slow'）；
$（“#logo img img”）
.css（{'width'：'184px'，'height'：'33px'}）
.attr（'src'，'logo1.png'）；
}
if（$（this）.scrollTop（）<100）{
$（'logo_h logo_h_img'）.fadeIn（'fast'）；
$（“#logo img img”）
.css（{'width'：'184px'，'height'：'60px'}）
.attr（'src'，'logo2.png'）；
}
});
});

为了演示，文件名被替换

---

谢谢大家!

感谢@rlemon的帮助，我有了一个更好的脚本，现在实现它是我遇到麻烦的任务

<!-- Logo Scroll -->

var img = document.querySelector('.logo_h__img img'); // get the element
img.dataset.orig = img.src; // using dataset is just being fancy. probably don't do this
document.addEventListener('scroll', function (e) { // add the event listener
    if (document.body.scrollTop > 0) { // check the scroll position
        img.src = img.dataset.scroll; // set the scroll image
    } else {
        img.src = img.dataset.orig; // set the original image back
    }
});

var img=document.querySelector（'.logo\u h\u img img'）；//获取元素
img.dataset.orig=img.src；//使用数据集只是一种幻想。可能不会这样做
document.addEventListener（'scroll'，函数（e）{//添加事件侦听器
如果（document.body.scrollTop>0）{//检查滚动位置
img.src=img.dataset.scroll；//设置滚动图像
}否则{
img.src=img.dataset.orig；//设置原始图像
}
});

代码中缺少的选择器：

$（'logo\h logo\u h\u img'）

应该是

$（'logo\u h.logo\u h\u img'）

如果选择类，或者

$（'logo\u h\u img'）

如果选择ID。尝试在代码中更新，看看是否有帮助？嗨，我已经这样做了，但它不起作用。。。