I am currently working on developing a layout that includes a sticky header and sidebar for my content list.
My goal is to have the sidebar scroll down as I move through the page content, while also ensuring that the header scrolls horizontally along with the page.
For reference, I am looking to achieve a similar effect as seen on this site -
The specific challenge I am facing is figuring out the necessary CSS styling to implement this design. I want to display the time on the header and screens on the sidebar, but I am struggling to determine the exact CSS properties to make it work effectively.
<div class="container">
<div class="timeline">
<ul>
<li> </li>
<li>|10am</li>
<li>|10am</li>
<li>|11am</li>
<li>|12pm</li>
<li>|1pm</li>
<li>|2pm</li>
<li>|3pm</li>
<li>|4pm</li>
<li>|5pm</li>
<li>|6pm</li>
<li>|7pm</li>
<li>|8pm</li>
<li>|9pm</li>
<li>|10pm</li>
<li>|11pm</li>
</ul>
</div>
<div class="screens">
<ul>
<li>Screen 1</li>
<li>Screen 2</li>
<li>Screen 3</li>
<li>Screen 4</li>
<li>Screen 5</li>
<li>Screen 6</li>
<li>Screen 7</li>
<li>Screen 8</li>
<li>Screen 9</li>
<li>Screen 10</li>
</ul>
</div>
</div>