homepage Welcome to WebmasterWorld Guest from 54.196.63.93
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
if on bottom and or away from it
Sub_Seven



 
Msg#: 4661992 posted 7:42 am on Apr 10, 2014 (gmt 0)

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

WebmasterWorld Senior Member fotiman us a WebmasterWorld Top Contributor of All Time 5+ Year Member



 
Msg#: 4661992 posted 12:54 pm on Apr 10, 2014 (gmt 0)

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



 
Msg#: 4661992 posted 8:18 pm on Apr 10, 2014 (gmt 0)

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

WebmasterWorld Senior Member fotiman us a WebmasterWorld Top Contributor of All Time 5+ Year Member



 
Msg#: 4661992 posted 11:09 pm on Apr 10, 2014 (gmt 0)

Always a pleasure. :)

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved