Question

很多时候我在这个页面上找到了很多解决方案并感谢您的帮助！我希望我能找到一个新的！： - ）

我需要在标题中更改徽标，现在，当js工作一个新的类，用css我做了一个新的布局，但徽标是在php文件...

所以：当页面滚动标题更改，但我无法更改标题中的标识，因为是在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文件中添加这两个徽标，并使用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;
}

Answer 2

我认为更好的方法是在CSS中放置徽标，而在PHP中只会是此徽标的容器。然后，当您更改CSS时，徽标也会更改。

<div id="logo-container"></div>

#logo-container {
    width: logo_width;
    height: logo-height;
    background: url('path/ot/logo') cover;
}

更改标头js类和CSS时如何更改php标头中的徽标

2 个答案: