How to change logo of a sticky menu when scroll up by CSS?

Question

Here's my website http://tapash.atwebpages.com/

As you can see my logo is white and it becomes invisible when scrolled up. How can I specify a logo by CSS when scroll up the page and menu becomes sticky? I have another color logo which I would like to put there. Thanks

Answer 1

I have seen that you already use jQuery on your website. This makes it very easy to implement.

Give your image an ID for JavaScript:

<img src="LOGO_WHITE" id="test" />

Execute a function on scrolling:

$(window).scroll(function (event) {
    ...
});

When scrolling (your header turns white), a different image should be set:

$("#test").attr("src", "LOGO_BLACK");

But now the problem is that the logo is permanently black. You have to set the white logo again when the user scrolls at the top:

if($(window).scrollTop() <= 0) {
    $("#test").attr("src", "LOGO_WHITE");
}

Your function should therefore look like this:

$(window).scroll(function (event) {
    if($(window).scrollTop() <= 0) {
        $("#test").attr("src", "LOGO_WHITE");
    } else {
        $("#test").attr("src", "LOGO_BLACK");
    }
});

Example on JSFiddle: https://jsfiddle.net/18v9d5eq/1/

It looks like you're using a template from Drupal. If you are not familiar with web technologies, my solution above is the easiest. The cleanest solution would be to include both images (white and black) in the header and then just set the visibility with display: hide/block.