Use jQuery to show a div only when scroll position is between 2 points
- by Rik
Hi,
I'm trying to work out how to get a div (#tips) to appear when the user scrolls into the 2nd quarter of its containing div's height (#wrap), and then have it disappear when the user scrolls into the last quarter. So it would be like this:
1st quarter - #tips is hidden
2nd quarter - #tips is visible
3rd quarter - #tips is visible
4th quarter - #tips is hidden
I'm almost completely new to jQuery but what I've got so far is this:
function addKeyboardNavigation(){
// get the height of #wrap
var $wrapHeight = $('#wrap').outerHeight()
// get 1/4 of wrapHeight
var $quarterwrapHeight = ($wrapHeight)/4
// get 3/4 of wrapHeight
var $threequarterswrapHeight = 3*($wrapHeight)
// check if we're over a quarter down the page
if( $(window).scrollTop() > $quarterwrapHeight ){
// if we are show keyboardTips
$("#tips").fadeIn("slow");
}
}
This is where I get confused. How can I check if the scroll position is $quarterwrapHeight but < $threequarterswrapHeight?
To make it run I've been using:
// Run addKeyboardNavigation on scroll
$(window).scroll(function(){
addKeyboardNavigation();
});
Any help or suggestions would be greatly appreciated!
Thanks.
