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

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

• javascript
• jquery

• Besides using hover you could take the scroll position and subtract the height of each '.section' from it till it is 0 or less. That will be increasingly difficult with the more you have wrapping these divs. – bygrace Commented May 25, 2012 at 19:55
• There is a fair amount wrapped around these divs, and a lot inside it (it's the HTML output from docbook) – Scribblemacher Commented May 25, 2012 at 20:01
• gizmovation gives a better approach below anyways – bygrace Commented May 25, 2012 at 20:09

2 Answers 2

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/

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.