Переключить логотип на прокрутку вниз

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. Затем замените «// сделайте обменивать здесь» с этим:

$("#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, вы можете заменить «//do the swapping here ":

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