How can I determine the position of a DIV relative to the body or html tag?
For example:
- If I have an element moving up the screen.
- When the page is scrolled vertically, and the DIV reaches a certain height on the screen, it changes color.
- Once the DIV goes off the screen, it reverts back to its original color.
I've achieved a similar effect using Next/Previous buttons:
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
var number = 0;
var goSign = "";
function goToByScroll(id){
$('html,body').animate({scrollTop: $("#"+id).offset().top-100},'slow','swing', function()
{
$('#'+id).css('background', '#8b00cb');
$('#'+(id-1)).css('background', 'none');
$('#'+(id+1)).css('background', 'none');
});
}
function iterate(goSign)
{
if(goSign == "next")
{
if(number < 12 && number >= 0)
{
goToByScroll(++number);
}
//alert(number);
}
else if(goSign == "previous")
{
if(number <= 12 && number >= 1)
{
goToByScroll(--number);
}
//alert(number);
}
}
</script>
</head>
<body>
<div style = "position:fixed; top:90px;right:200px;width:200px;height:50px">
<a href="javascript:void(0)" onClick="iterate('next')">Next</a><br/>
<a href="javascript:void(0)" onClick="iterate('previous')">Previous</a>
</div>
<div style="width:600px">
[< Repeat HTML content with multiple div blocks here for demonstration purposes >]
</div>
</body>
This solution requires manual interaction with the Next/Previous buttons. Is there a way to achieve this automatically without the need for user clicks?
I'm considering utilizing jQuery's .position() method: http://api.jquery.com/position/