Question

我希望在滚动时更改徽标图像（用于颜色）。

当向下滚动以在其后面有一个暗条时，导航当前会发生变化，是否有人建议哪些最适合此图像替换？

我试过在另一个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
    }
});

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

1 个答案: