向下滚动时切换徽标

Question

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

当用户向下滚动时，header 部分变成粘性固定区域，并始终显示在顶部。

有什么方法可以在用户向下滚动到某个位置时用另一个徽标（水平的、较小的版本）替换徽标？

我快速搜索了一下，似乎在论坛中找不到任何类似的问题。

这是显示徽标的 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。然后用这个替换“//在这里进行交换”：

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

向下滚动时切换徽标

Switch logo on scroll down

html

css

php

wordpress

jquery