I have the below function set in place to fade out/in certain content based on its proximity to the top/bottom of the page. The desired effect is pretty visible and obvious if you click on the ABOUT link on the top, but if you use the WORK button to scroll down the content just pops in at the right position but the fading does not occur as it does with the top.
I'm sure it has something to do with the scrollBottom equivalent I've created but not sure how to go about fixing this
$(window).load(function(){
$(window).scroll(function() {
var st = $(window).scrollTop();
var sb = $(document).height() - $(window).height() - $(window).scrollTop();
$('#about .content').css({'opacity' : (1 - st/450)});
$('#work .content').css({'opacity' : (450 + sb*-1)});
$('#home .content').css({'opacity' : (-(450 + sb*-1))});
$('#home .content').css({'opacity' : (-(1 - st/450))});
});
});