Question

Context

I have a div with overflow: auto property.

In this div, I have this:

<h3>Category 1</h3>
<ul>
    <li>blabla</li>
    <li>blabla</li>
    etc...
</ul>
<h3>Category 2</h3>
<ul>
    <li>blabla</li>
    <li>blabla</li>
    etc...
</ul>
<h3>Category 3</h3>
    etc...

I would like when I scroll, the current category attaches the top of the div, until the next category. When I arrive at an other category, it attaches the top in place of the previous.

Difficult to explain, so I made an image:

I’m sure I saw this in a website, but I don’t remember.

Questions

• Do you know a plugin for this or a site with this?
• Can you give me some tracks to develop it?

Answer 1

JSFiddle Demo – http://jsfiddle.net/h2p6W/3/

Attach an event listener to your scrollable div and measure the headers’ positions in the div. Then pick the one that is the small negative value and display it’s text to your header.

$('#scroller').scroll(function () {
    var positions = $('h3', this).map(function() {
            return {
                top: $(this).position().top,
                el: this
            };
        }).get();

    //Go backwards through the array and pick the first negative (smallest) value
    for(var i = positions.length - 1; i >= 0; i--) {
        if(positions[i].top < 0) {
           $('#header').text($(positions[i].el).text());
           return;
        }
    }
});

For instance, if you have 5 headers in your scrollable div, and the positions are:

[-100, -50, -20, 30, 120] – Then the -20 is the header you want to display.

EDIT – refactored code

JSFiddle Demo – http://jsfiddle.net/h2p6W/4/

$('#scroller').scroll(function () {
    var category = '';

    $($('h3', this).get().reverse()).each(function () {
        if($(this).position().top < 0) {
            category = $(this).text();
            return false;
        }
    });

   $('#header').text(category);
});