Welcome to WebmasterWorld Guest from 54.234.8.146

Forum Moderators: open

Message Too Old, No Replies

if on bottom and or away from it

     

Sub_Seven

7:42 am on Apr 10, 2014 (gmt 0)

5+ Year Member



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

12:54 pm on Apr 10, 2014 (gmt 0)

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



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

8:18 pm on Apr 10, 2014 (gmt 0)

5+ Year Member



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

11:09 pm on Apr 10, 2014 (gmt 0)

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



Always a pleasure. :)
 

Featured Threads

Hot Threads This Week

Hot Threads This Month