Question

我有以下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，位于同一位置。

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

提前致谢

Answer 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切换。

Answer 2

您可以找到几乎相同的问题here。要回答你的问题，我会做以下事情： {{1}}

向下滚动切换图像

2 个答案: