javascript - 向下滚动时替换 Logo 图像 JS/HTML/CSS wordpress 网站

Question

我希望在滚动时更改 Logo 图像(出于颜色目的)。

当向下滚动时，导航当前会发生变化，后面有一个黑条，对于什么最适合这个图像替换，有人有什么建议吗？

我已经尝试使用这个在另一个 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');
        }
    });
});

为了演示而替换了文件名。

谢谢!

Answer 1

感谢@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
    }
});