Question

I’m trying to fix a div at the top of a layout that will contain a blog post’s information (date posted, # of notes, permalink, etc.) and change this information as you scroll down past posts. I’m not sure if it would require any kind of javascript or just some intricate positioning using css. Here’s how I would layout the posts. How can I get the specific post information from each post to change within that fixed div as the posts scroll past it?

#container {
    width: 960px;
    margin: 0px auto;
}

#changingpostinformation {
    position: fixed;
    margin: 0px auto;
}

<div id="container">

    <div id="changingpostinformation">fixed post information div that's information changes as each post below reaches the top of #container</div>

        <div class="post">
            <h3>Post Title>
            <p>This is the body of this example post.</p>
        </div>

        <div class="post">
            <h3>Post Title>
            <p>This is the body of this example post.</p>
        </div>

    </div>

Answer 1

Like @ShankarSangoli says, you should add top: 0;, and also left: 0; to #changingpostinformation (or other values to position it however you like)

You’ll need some javascript to find out which post appears first on the page and show its info.

$(function() {
    $(window).bind('load resize scroll', function() {
        var doctop = $('body').scrollTop();

        // loop over all posts, from top to bottom
        $('.post').each(function() {
            if ($(this).position().top > doctop) {
                put_postinfo_in_fixed_div($(this));
                return false; // breaks from the loop
            }
        });
    });
});

This function runs once when page is loaded, and also when the window is resized or scrolled.

You need to implement put_postinfo_in_fixed_div() which gets an post div, and does what it says.