Changing a Site Logo on scroll

  • I’m currently trying to change my site logo when the page scrolls down to a smaller version that rests on the menu bar I have fixed at the top of the page.

    I’ve tried adding the following jQuery 

    jQuery(window).scroll(function(){
    var fromTopPx = 5;
    var scrolledFromtop = jQuery(window).scrollTop();
    if(scrolledFromtop > fromTopPx){
        jQuery('site-logo').addClass('scrolled');
    }else{
        jQuery('site-logo').removeClass('scrolled');
    }
});

    accompanied by the following in the .css

    site-logo.scrolled {
	background-image: url(https://localhost:8888/wordpress/wp-content/uploads/2015/03/NIS_Small_Full_LogoEdit_background.png);
	position: fixed;
	z-index: 11;
}

    It does not seem to change it at all, any suggestions as to why it may not be working or a better way to go about doing it?

Viewing 2 replies - 1 through 2 (of 2 total)

  • I think you just need to add a period before your references to the class of site-logo. So, it would be:

    jQuery(window).scroll(function(){
    var fromTopPx = 5;
    var scrolledFromtop = jQuery(window).scrollTop();
    if(scrolledFromtop > fromTopPx){
        jQuery('.site-logo').addClass('scrolled');
    }else{
        jQuery('.site-logo').removeClass('scrolled');
    }
});

    and

    .site-logo.scrolled {
	background-image: url(https://localhost:8888/wordpress/wp-content/uploads/2015/03/NIS_Small_Full_LogoEdit_background.png);
	position: fixed;
	z-index: 11;
}
    Vanessa

    (@vanessajaded)

    Did you ever get this working @radenb?

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Changing a Site Logo on scroll’ is closed to new replies.