javascript - 如何在更改 header js 类和 CSS 时更改 php header 中的 Logo

Question

很多时候我在这个页面上找到了很多解决方案，感谢您的帮助!我希望我能再找到一个新的! :-)

我需要在标题中更改 Logo ， 现在，当 js 工作创建一个新类时，我使用 css 创建一个新布局，但 Logo 在 php 文件中...

所以:当页面滚动时标题发生变化，但我无法更改标题中的 Logo ，因为在 php 和 css 中我找不到解决方案

这是PHP代码:

<!-- header -->
<header class="header clear" role="banner">

    <!-- logo -->
    <div class="logo">
        <a href="<?php echo home_url(); ?>">
            <img src="<?php echo get_template_directory_uri(); ?>/img/logo.png" alt="Logo" class="logo-img">
        </a>

    </div>
    <!-- /logo -->

这是js(不知道有没有必要知道)

$(document).ready (function () {
    $(window).scroll (function () {
        var sT = $(this).scrollTop();
            if (sT >= 100) {
                $('.header').addClass('cambio_header')
            }else {
                $('.header').removeClass('cambio_header')
            }
    })
})

有人知道如何编写 php？ (网站是用 Wordpress 制作的)

非常感谢!

Answer 1

您可以在 javascript 中更改图像:

$(document).ready (function () {
    var logo-top = '/url/to/logo.jpg';
    var logo-scroll = 'url/to/logo-scroll.jpg';
    $(window).scroll (function () {
        var sT = $(this).scrollTop();
            if (sT >= 100) {
                $('.header').addClass('cambio_header').find('img.logo-img').attr('src', logo-scroll);
            }else {
                $('.header').removeClass('cambio_header').find('img.logo-img').attr('src', logo-top);
            }
    });
});

或者您可以在 php 文件中添加两个 Logo ，并使用 css 规则隐藏/显示它们

<div class="logo">
    <a href="<?php echo home_url(); ?>">
        <img src="<?php echo get_template_directory_uri();?>/img/logo.png" alt="Logo" class="logo-img">
        <img src="<?php echo get_template_directory_uri();?>/img/logo-scroll.png" alt="Logo" class="logo-img scroll">
    </a>
</div>

.header .logo-img.scroll{
    display:none;
}
.header.cambio_header .logo-img{
    display:none;
}
.header.cambio_header .logo-img.scroll{
    display:block;
}