0

Website is http://www.narwal.shop/

I am using wordpress Version 4.9.4

I like to use a white PNG logo on the homepage. If I scroll I like to change to a black PNG logo because of the white sticky menu. I succeeded with the code below. The only issue I have now is I scroll back now it doesnt change back again to the white PNG logo. Can someone help? Thank you in advance.

<script type="text/javascript">
jQuery(function($) {
    $(window).scroll(function() {
        if($('.logo-container').hasClass('shrinked')) {
            $('#main-logo .navbar-brand img').attr('src','http://www.narwal.shop/wp-content/uploads/2018/03/Logo_Narwal_White.png');
        }else{
            $('#main-logo .navbar-brand img').attr('src','http://www.narwal.shop/wp-content/uploads/2018/03/    Logo_Narwal_Black.png');
        }
    });
});
</script>
Kristianmitk
  • 4,528
  • 5
  • 26
  • 46
Rick
  • 29
  • 2
  • 8

1 Answers1

1

Try this one:

<script type="text/javascript">
    jQuery(function($) {
        var homePage = $(".home");
        if(homePage.length) {
            $(window).scroll(function() {
            var scrollpos = $(document).scrollTop();
            if(scrollpos > 10) {
                $('#main-logo .navbar-brand img').attr('src','http://www.narwal.shop/wp-content/uploads/2018/03/Logo_Narwal_Black.png');
            }
            else{
                $('#main-logo .navbar-brand img').attr('src','http://www.narwal.shop/wp-content/uploads/2018/03/Logo_Narwal_White.png');
            }
            });
        }
    });
</script>

Hope this may help you.

Pankaj Bhandarkar
  • 496
  • 3
  • 20
  • Thank you very much! It works on the homepage. Unfortunately it doesnt work on the other pages, this a white menu and therefore when you scroll up again the logo isnt visible. Do you know a solution, thank you in advance. – Rick Mar 28 '18 at 14:14
  • Code has updated, there is a check - if it is home page then the code will execute. – Pankaj Bhandarkar Mar 30 '18 at 08:06