How to find the closest element to the current position with jQuery

Question

I have a document with several sections like this:

<div class='section' id='sec1'>
    lalala
    lalala
    lalala
</div>

<div class='section' id='sec2'>
    lalala
    lalala
    lalala
</div>

<div class='section' id='sec3'>
    lalala
    lalala
    lalala
</div>

<div class='section' id='sec4'>
    lalala
    lalala
    lalala
</div>

How do I grab the closest <div.section> to the current scroll position (presumably, this would equate to the section that the reader is currently looking at)?

Answer 1

You can use $(window).scrollTop() and $(el).postion().top to figure out how far the element is from the top of the screen after scrolling.

You can then use this information to manipulate the element as desired.

Here is a working jsfiddle example: http://jsfiddle.net/gizmovation/x8FDU/