Div Fade-In when on screen (currently auto fading!?) - parallax site - css

Question

OK, so my problem is that I have a parallax website for a client and they would like a product description to fade-in when they scroll-down the parallax site. The problem I think I have is because the site is effectively one long page, the scripting is getting confused and fading the div in from "opacity:0" when the page is loaded. I have put a long fade-in on the div to understand what is happening and I have also made a rubbish box without proper formatting to test it. I have uploaded a temporary copy of the site (i'm working offline) to show what is happening.
http://ethicalincubator.com/parallax/parallax30.07/index_kmd.php#!images
Thank you for your help everyone!!! :-)
CSS
/* Hide any element */
.hideme {
Opacity:0;
}
HTML
<div
class="hideme fadein-on-view"
style="opacity:0;width:200px;height:80px;background-color:white;">Fade
In</div>
SCRIPT
<script>
// Scroller script for Fade-In when "div" is on screen
$(document).ready(function()
{
/* Every time the window is scrolled ... */
$(window).scroll( function(){
/* Check the location of each desired element */
$('.fadein-on-view').each( function(i){
var
bottom_of_object = $(this).position().top + $(this).outerHeight();
var
bottom_of_window = $(window).scrollTop() + $(window).height();
/* If the object is completely visible in the window, fade it it */
if(
bottom_of_window > bottom_of_object ){
$(this).animate({'opacity':'1'},5000);
}
});
});
})
</script>

Answer 1

To check the bottom of the window, instead of using .scrollTop, try window.pageYOffset.
Plus I think you're making the JS work too hard - I would try to calculate the bottom_of_object outside the .scroll() function so that it's not calculating the position every time the user is scrolling.
And for simple fade in/out, I would just do a display:none, .fadeIn().