if on bottom and or away from it

[Sub_Seven]

Hello everyone,

I have the following code functioning just right:

$(document).ready(function() {
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() > $(document).height() - 144) {
$( "#navbarCustom" ).animate({
opacity: 0
}, 377, function() {
//alert("animation complete!");
});
}
});
});

What I would like to achieve and obviously cannot is add the functionality to revert the opacity: 0 back to 1 if and when the user has scrolled 144px AWAY from the bottom (to revert the whole process).

If this can be done (I saw scrollBottom when attempting to get an answer by browsing a bit, guess I just don't know how to use it) where would be the best place to run the code, as an else clause of the if statement or within the function that runs when the animation is complete and last but not least, could someone tell me how to achive this be it with scrollBottom or anything else that could get things working?

Thanks in advance for any replies provided.

[Fotiman]

Let me see if I understand what you've got there now. Suppose you have the following:
document height of 1000px
window height (viewport) of 500px.

If the user scrolls 10px down the page, then your calculation will do this:
if (10 + 500 > 1000 - 144)
so
if (510 > 856) { opacity: 0 }

So in this particlar case, the user must scroll down 357px before the opacity will be set to zero. At that point, the user will be 143px away from the bottom, won't they?

Are you saying that as they scroll back up, you want to make it visible again? Wouldn't that just be a matter of adding an else to your if? Like:

$(document).ready(function() { 
 $(window).scroll(function() { 
  if($(window).scrollTop() + $(window).height() > $(document).height() - 144) { 
   $( "#navbarCustom" ).animate({ 
    opacity: 0 
   }, 377, function() { 
    //alert("animation complete!"); 
   }); 
  }
  else {
   $( "#navbarCustom" ).animate({ 
    opacity: 1 
   }, 377, function() { 
    //alert("animation complete!"); 
   }); 
  }
 }); 
});

[Sub_Seven]

Let me see if I understand what you've got there now. Suppose you have the following:
document height of 1000px
window height (viewport) of 500px.

If the user scrolls 10px down the page, then your calculation will do this:
if (10 + 500 > 1000 - 144)
so
if (510 > 856) { opacity: 0 }

So in this particlar case, the user must scroll down 357px before the opacity will be set to zero. At that point, the user will be 143px away from the bottom, won't they?

Yes! I have a footer with a fixed height, showing a big image, so what this is doing is hiding the header (which is obviously positioned fixed @ top: 0;) exactly a few pixels before touching the top part of the image's containing element (#footer) so it looks real nice and your suggestion worked real nice indeed.

I still have a lot of tweaking and testing to do as this is fully responsive but I like the direction its taking.

Thanks a lot for the help Fotiman :)

[Fotiman]

Always a pleasure. :)