CODEWITHSUNDEEP
javascriptjquery
Scribblemacher
Scribblemacher

Reputation: 1638

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

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)?

Upvotes: 15

Views: 16738

Answers (2)

Mihai Stancu
Mihai Stancu

Reputation: 16117

Whenever you hover an element the mousemove event tells you which element you're hovering over.

$(document).bind('mousemove', function(e) {
    e.target
    /*
        the target in click/hover events
        is the element that the event was
        triggered on.
    */
});

One drawback may be the fact e.target will give you the element with the highest z-index -- the one in the top-most layer -- so if you have an overlay above your text it will give you the overlay not the text div.

Upvotes: -5

christurnerio
christurnerio

Reputation: 1469

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/

Upvotes: 22

Related Questions