在向下滚动 JS / HTML / CSS wordpress 网站上替换徽标图像答案

【问题标题】：Replace logo image upon scroll down JS / HTML / CSS wordpress website在向下滚动 JS / HTML / CSS wordpress 网站上替换徽标图像
【发布时间】：2015-04-06 03:49:07
【问题描述】：

我想在滚动时更改徽标图像（为了颜色）。

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

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

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

谢谢！

【问题讨论】：

代码中缺少的选择器：$('logo_h logo_h__img') 如果选择类，则应为 $('.logo_h .logo_h__img')，如果选择 ID，则应为 $('#logo_h #logo_h__img')。尝试在代码中更新它，看看是否有帮助？
嗨，我已经这样做了，但它不起作用......

标签： javascript jquery html css wordpress

【解决方案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
    }
});

【讨论】：