Hi Paul et al,

I would like to swap an image when the sticky nav appears. I searched the forum and found this possible answer from Anthony 4 years ago:

#navwrap.sticky img{display:none}
#navwrap.sticky #logo {background:url(../images/mynewlogo.png);}

But I the classes are different now and I can't seem to make it work.

I tried giving each logo a class suffix, published both in the logo position and added this css but it was a no go:

#sticky-fill.hidden .moduletable.logo-color {display:none}
#sticky-fill.visible .moduletable.logo-white {display:none}

In the Buildr demo, the logo text changes from white to black in the sticky nav. Can I do something similar with an image? Am I on the right track?

Thanks,

Joanne

Hi Joanne,

Do you have a link for your site?

Thanks
Paul

Yes, here: southamptoncoa.org/sohocoa/

It's pretty ugly right now. I have both the logos showing and no content as yet.

Joanne

Hi Paul,

I've been working on this problem and from everything I've read so far, swapping the images on scroll can't be done with css alone. It requires some javascript. I don't know javascript at all but I did find this (see below). I tried modifying it but I don't know what I'm doing. I'm posting it here just in case there's someone out there that does:

Original script:
$(function(){
$(window).scroll(function(){
if($(this).scrollTop() > 100) {
$('#topbar, .cart-label').fadeOut('slow');
$('#logo-img img')
.css({'width':'184px','height':'33px'})
.attr('src','http://.../resized.png');
}
if($(this).scrollTop() < 100) {
$('#logo, #topbar, .cart-label').fadeIn('fast');
$('#logo-img img')
.css({'width':'184px','height':'60px'})
.attr('src','http:/.../logo2.png');
}
});
});

My fumbled attempt at modifying:

$(function(){
$(window).scroll(function(){
if($(this).scrollTop() > 100) {
$('#logowrap, .logo-white').fadeOut('slow');
$('#logo-img img')
.css({'width':'350px','height':'141px'})
.attr('src','southamptoncoa.org/sohocoa/images/soho-logo-wh.png');
}
if($(this).scrollTop() < 100) {
$('#logo, #logowrap, .logo-white').fadeIn('fast');
$('#logo-img img')
.css({'width':'350px','height':'141px'})
.attr('src','southamptoncoa.org/sohocoa/images/soho-logo.png');
}
});
});

Hi Joanne,

The template already adds a class to the body tag when the page has been scrolledso you can use that for styling without adding any javascript.

Regards,

Rob