I am looking to create a fixed div at the top of a layout that will display information about a blog post, such as the date posted, number of notes, and permalink. As users scroll past different posts, I want this fixed div to update with the relevant information for each post. I am unsure if this functionality requires JavaScript or if it can be achieved through CSS positioning techniques. Below is how I envision structuring the layout of the posts. How can I ensure that the specific post information changes within the fixed div as users scroll through the posts?
#container {
width: 960px;
margin: 0 auto;
}
#changingpostinformation {
position: fixed;
margin: 0 auto;
}
<div id="container">
<div id="changingpostinformation">Fixed div displaying post information that dynamically updates as users scroll through the posts.</div>
<div class="post">
<h3>Post Title>
<p>This is the content of the example post.</p>
</div>
<div class="post">
<h3>Post Title>
<p>This is the content of another example post.</p>
</div>
</div>