CODEWITHSUNDEEP
phpjqueryhtmlcsswordpress
user1752759
user1752759

Reputation: 635

Switch logo on scroll down

I have a relatively tall logo on a WordPress based website.

When the user scrolls down, the header section becomes a sticky, fixed area and is always displayed at the top.

Is there a way that I can replace the logo with another one (which is a horizontal, smaller version) when the user has scrolled down passed a certain position?

I've done a quick search and can't seem to find any similar problems in the forum.

This is the current code in the header.php file displaying the logo:

<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>

I'm not too sure how to implement this but any help would be greatly appreciated,
Thanks.

Upvotes: 0

Views: 3004

Answers (1)

Michael Dziedzic
Michael Dziedzic

Reputation: 543

To swap out the logos after the page has scrolled down 200 pixels, you can try something like this:

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

As far as the "// do the swapping here" goes, if the logo image was applied as a background-image to a div (say, #logo), you could have two classes, one with the tall logo: .logo-tall, and one with the short logo: .logo-short. Then replace the "// do the swapping here" with this:

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

The relevant CSS being something like this:

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

Alternatively, if you wanted to use HTML, you could replace "// do the swapping here" with this:

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

Upvotes: 1

Related Questions