What I have done is used jQuery to add a class when an element is visible and certain pixels from the top and when the element is no longer visible on the page by after scrolling back up it removes the classes.

It works in Chrome and Safari but I can't get it to work in firefox or IE. Im using Firefox 36.0.4 and have tried on down to 32. IE 8,9,10 wont work either. It works on mobile and I know that the $(window).scroll() is functioning because my sticky nav slides down when you scroll down 50px.

Here's the link to the live site - moyertex.com

Here is the basic of my code:

 

  
$(window).scroll(function(event){
  
if ( $( "#quote" ).length ) {
  
 var bedVis = isVisible(".bed");
  
 var textVis = isVisible(".quoteText");
  
 var quoteTop = $('.quote').offset().top - window.innerHeight;
  
 var top = $('body').scrollTop();
  
 // If Visible
  
 if(bedVis || textVis){
  
 if( top > quoteTop + 400 ){
  
 $('.bed').addClass("flipInY").css("opacity","1");
  
 }
  
 }else{ // If not visible
  
 $('.bed').removeClass("flipInY").css("opacity","0");
  
 }
  
 }
  
});
  


  
function isVisible(div){
  
 var TopView = $(window).scrollTop();
  
 var BotView = TopView + $(window).height();
  
 var TopElement = $(div).offset().top;
  
 var BotElement = TopElement + $(div).height();
  
 return ((BotElement <= BotView + 200));
  
}
 

Thanks for any help