向下滚动时切换图像答案

【问题标题】：Switching image on scroll down向下滚动时切换图像
【发布时间】：2015-09-11 16:38:13
【问题描述】：

我有以下 JS，一旦用户滚动到某个点，它就会改变我的标题颜色和菜单文本颜色。

//Fade in header
$(window).on("scroll", function () {
 if ($(this).scrollTop() > 50) {
    $("body.home header, body.page header").css("background","#fff");
        $("body.home header, body.page header").css("box-shadow","0px 2px 4px -2px rgba(0, 0, 0, 0.15)");
        $("body.home header, body.page header").css("transition","1s");
            $(".nav-menu ul li a").css("color","#222");


 }
else {
    $("body.home header, body.page header").css("background","none");
    $("body.home .nav-menu ul li a, body.page .nav-menu ul li a").css("color","#fff");
            $("body.home header, body.page header").css("box-shadow","none");

 }
 });

我现在需要对此进行调整，以便将我的白色徽标换成黑色。徽标的当前 HTML 代码是：

<div id="logo"><img src="<?php bloginfo('template_directory'); ?>/img/logo.png" width="125px" style="padding: 10px;" /></div>

黑色徽标名为 logo-black.png，位于同一位置。

如何调整代码以切换徽标？

提前致谢

【问题讨论】：

奇怪的是，这两种解决方案似乎都不适用于我的情况。控制台没有任何效果，也没有错误或任何内容。

标签： javascript html

【解决方案1】：

var imgLogoEl = $("logo").find('img:first');
var currentSrc = imgLogoEl.src;
var newSrc = currentSrc.replace('logo.png', 'logo-black.png');
imgLogoEl.src = newSrc;

这是向您详细说明需要哪些步骤，您也可以这样做：

$("logo").find('img:first').src.replace('logo.png', 'logo-black.png');

这是一种方法......但是，您可以发挥创意并使用一些 jQuery 切换。

【讨论】：

【解决方案2】：

您可以找到几乎相同的问题here。要回答您的问题，我将执行以下操作： $('#logo > img').attr('src', 'path/to/img/name.png');

【讨论】：

id "logo" 在 OP 的 div 上，而不是 img 上。
感谢您的收获。我现在修好了。