切换徽标向下滚动

Question

我在基于WordPress的网站上有一个相对较高的徽标。

当用户向下滚动时，标题部分变为粘滞的固定区域，并始终显示在顶部。

当用户向下滚动通过某个位置时，有没有办法可以用另一个徽标替换徽标（这是一个水平的，较小的版本）？

我已快速搜索，似乎无法在论坛中发现任何类似的问题。

这是header.php文件中显示徽标的当前代码：

<div class="logo-container">
  <a <?php echo $img_logo? '' : 'class="text-logo" '; ?>id="logo" href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">
    <?php
    if($img_logo)
        a13_header_logo_image();

    else
        echo $apollo13->get_option( 'appearance', 'logo_text' );
    ?>
  </a>
</div>

我不太确定如何实现这一点，但我们将非常感谢任何帮助，谢谢。

Answer 1

要在页面向下滚动200像素后换出徽标，您可以尝试以下操作：

$(document).scroll(function () {
    if ($(document).scrollTop() > 200) {
        // do the swapping here
    }
});

就“//在这里交换”而言，如果将徽标图像作为背景图像应用于div（例如#logo），则可以有两个类，一个具有高标识： .logo-tall，以及一个短标识：.logo-short。然后用以下代码替换“// do the swapping here”：

$("#logo").removeClass("logo-tall");
$("#logo").addClass("logo-short");

相关的CSS是这样的：

.logo-tall {
    background: url("img/logo-tall.png") no-repeat;
}
.logo-short {
    background: url("img/logo-short.png") no-repeat;
}

或者，如果你想使用HTML，你可以用这个替换“//在这里交换”：

$('#logo img').attr("src", "img/logo-short.png");