6 years 11 months ago
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');
}
});
});