CODEWITHSUNDEEP
jqueryhtmlcsswordpress
Rick
Rick

Reputation: 29

Wordpress Logo Change When Scroll

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>

Upvotes: 0

Views: 311

Answers (1)

Pankaj Bhandarkar
Pankaj Bhandarkar

Reputation: 498

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.

Upvotes: 1

Related Questions