get new x/y positions of element after scroll using jQuery

jquery scroll position

46,715

The link element's position w.r.t. the document does not change when you scroll. To get the position of the element w.r.t. the window's top-left, you can take it's offset() and subtract the window's scrollTop form what you get:

var offset = $(".a1").offset();
var w = $(window);
alert("(x,y): ("+(offset.left-w.scrollLeft())+","+(offset.top-w.scrollTop())+")");

Demo: http://jsfiddle.net/xQh5J/10/

46,715

Author by

Prasad Jadhav

I am a graduate in Computer Engineering. Currently working with Steepgraph Systems Technology I know: C#, ASP.Net, jQuery, JavaScript, SQL Server Interests : Website Design(Check this video of my first web-app) Hobbies : Programming, Designing

Updated on May 29, 2020

Comments

Prasad Jadhav almost 4 years
Lets say I have an <a> tag as follows:
```
<body>
    <div class="wrapper">
        <a href="#" class="a1">Click Me</a>
    </div>
</body>
```
and my CSS are:
```
body{ padding:10px;}
.wrapper { height:1000px; width:500px;}
```
Currently I am using .offset() of Jquery to get the X/Y positions of <a> tag.
```
var offset = $(".a1").offset();
var top = offset.top;
var left = offset.left;
```
Now when I scroll the page and check of <a> tag's x,y co-ordinates, they remain the same, i.e. ineffective of page scrolling.
I want to get the new X,Y positions of <a> tag after scrolling the page related to the screen.
If this <a> tag gets hidden after scrolling down, I want its position in negative values.

Check this fiddle: http://jsfiddle.net/xQh5J/9/

Please help.