get attribute value depending on position from top

Question

Got this list of images. I would like to display the value of data-id of the figure which is closest to the 200px from the top of the browser. See when I scroll down i see the values 740 then 756 then 788 etc.

  <div id="counter" style="position:fixed;top:10px;left:10px;height:200px;width:200px;"></div>


 <figure style="height:200px;" data-id="740"></figure>
    <figure style="height:200px;" data-id="756"></figure>
    <figure style="height:200px;" data-id="788"></figure>
    <figure style="height:200px;" data-id="920"></figure>

Where is your Code ? JSfiddle huh ? – Dimag Kharab Dec 06 '14 at 11:44 — Dimag Kharab, Dec 06 '14 at 11:44
http://jsfiddle.net/skiweather/2uwpq1w0/ – Mark Henry Dec 06 '14 at 12:02 — Mark Henry, Dec 06 '14 at 12:02

score 0 · Answer 1 · answered Dec 06 '14 at 12:04

0

You can use .first() or :first to select the first element from a given selector on the page.

e.g.

$("figure").first()

$("figure:first")

Then to get the data-id attribute you can add:

$("figure:first").data("id")

answered Dec 06 '14 at 12:04

jonbaldie

378
5
12

yes, but based on the scroll position on the page. This is not the solution – Mark Henry Dec 06 '14 at 12:46
I see, this might help you then: http://stackoverflow.com/questions/17441065/how-to-detect-scroll-position-of-page-using-jquery – jonbaldie Dec 06 '14 at 13:01

get attribute value depending on position from top

1 Answers1