0
   

How can I change a logo with scroll (twice) to specific locations?

 
 
MaryZ
 
Reply Sat 4 Jun, 2016 03:39 pm
This JavaScript below worked, but it triggered the logo change after 500px (that >=500 value is a favored trigger, I suppose?) I want the logo change to trigger once a particular <div> reaches top of page. I thought, maybe this would work ...

if(!scroll.hasClass("red-area")){ ...
... but it did not! :-)

And I want the logo to change twice — we'll say red-logo and yellow-logo, where blue-logo is the original (so when each respective <div> hits top of page, that corresponding logo appears, blue-logo disappears) thereafter for rest of page, blue-logo comes back.

Any thoughts much appreciated!
Best, Mary

$(function() { var logo = $("blue-logo"); $(window).scroll(function() {
var scroll = $(window).scrollTop();

if (scroll >= 500) {
if(!logo.hasClass("red-logo")) {
logo.hide();
logo.removeClass("blue-logo").addClass("red-logo").fadeIn( "slow");
}
} else {
if(!logo.hasClass("blue-logo")) {
logo.hide();
logo.removeClass("red-logo").addClass("blue-logo").fadeIn( "slow");
}
}

});
});
  • Topic Stats
  • Top Replies
  • Link to this Topic
Type: Question • Score: 0 • Views: 811 • Replies: 0
No top replies

 
 

Related Topics

 
  1. Forums
  2. » How can I change a logo with scroll (twice) to specific locations?
Copyright © 2020 MadLab, LLC :: Terms of Service :: Privacy Policy :: Page generated in 0.03 seconds on 07/03/2020 at 08:30:42