Seeking the Current Top Position of Web Page Elements
In my web page, I have divs with a height of 100%, each containing different content. I am attempting to determine the top position of these divs to manipulate them accordingly. However, when I try to do so, the function returns a single number that does not change as I scroll.
This is snippet of my code:
HTML:
<header id="header">
<div id="menu-div" class="container-full">
<div class="container">
<a href="#">TEST</a>
<a href="#">TEST</a>
<a href="#">Test</a>
<a href="#">Test</a>
<a href="#">Test</a>
<a id="request-demo-a" class="pull-right" href="#">TEST demo</a>
</div>
</div>
</header>
<div id="first-div" class="center a-div">
test content...
</div>
<div id="full-div" class="container a-div">
test content...
</div>
<div id="other-div" class=" a-div">
More test content here...
</div>
<div id="other-div" class=" a-div">
Even more test content here...
</div>
CSS:
.a-div{
height:100%;
}
#full-div{
position:absolute;
top:100%;
width: 100%;
height: auto;
background: white;
z-index:5;
}
...
JavaScript (Jquery):
$(function(){
/**start:Scroll*/
$(document).scroll(function(){
$("#request-demo-a").html($('#full-div').offset().top);
/// I want this return current value of full-div!
//And when it become equel 0 do something! (This is just example)
});
/**End: Scroll*/
})
I am aiming to obtain the position of #full-div and trigger certain actions based on its value, such as executing a function when it reaches the top edge. Why is $('#full-div').offset().top returning a static number instead of updating while scrolling?