укладка div при прокрутке

Question

Я хочу отформатировать посты в блоге, чтобы они могли составлять «заголовки div», когда пользователь прокручивает страницу вниз. Единственный способ объяснить это - сделать небольшую демонстрацию , обманув и повсеместно используя z-index, чтобы смоделировать, как это должно выглядеть.

Я хочу воссоздать этот эффект, но сделать его применимым к сообщениям в блоге. Возможно ли это?

РЕДАКТИРОВАТЬ: Попытка найти способ создать этот эффект с помощью JavaScript.

Вот текущий css:

body {
    margin: 0;
    padding: 0;
}

h2, h3, p {
    padding: 0px;
    margin: 0px;
}

#container {
    position: relative;
    width: 360px;
    margin: 0px auto;
}

#header {
    position: fixed;
    top: 0px;
    width: 360px;
    height: 60px;
    background: #fff;
    z-index: 10;
}

#right_column {
    width: 360px;
    margin: 60px 0px 0px 0px;
}

    #right_column .first_title {
        position: relative;
        margin: 0px;
        font-size:32px;
        line-height: 30px;
        z-index: 9;
        background: #fff;
    }

    #right_column .first_fixed {
        position: fixed;
        top: 60px;
        z-index:6;
        width: 360px;
        background: #eee;
        border-top: #999 1px solid;
    }

    #right_column .first {
        position: relative;
        z-index: 5;
        background: #fff;
    }

    #right_column .second_title {
        position: relative;
        margin: 0px;
        font-size:32px;
        line-height: 30px;
        z-index: 5;
        background: #fff;
    }

    #right_column .second_fixed {
        width: 360px;
        position: fixed;
        top: 80px;
        z-index: 3;
        border-top: #999 1px solid;
        background: #eee;
    }

    #right-column .second {
        position: relative;
        z-index: 2;
    }

Вот разметка:

    <h2 class="first_title">This is the article title.</h2>
        <h3 class="first_fixed">This is the article title.</h3>
                 <p class="first">This is some text.</p>
    <h2 class="second_title">This is the article title.</h2>
        <h3 class="second_fixed">This is the article title.</h3>
                <p class="second">This is some text.</p>

Answer 1

Я не уверен, что вы просите .. Я полагаю, вы пытаетесь найти альтернативу тому, который вы уже нашли. В этом случае вы можете захотеть взглянуть на плагин путевых точек jQuery в этом примере .. вы определяете маркеры, которые запускают события при прокрутке страницы.
Вот его главная страница