How to make the position sticky to the screen

Question

I am making a horizontal website which has a sticky top nav with a side bar which displays the name of page user is viewing. I want to make the side bar stick to the screen when the user reaches the desired page. Help would be much appreciated.

link to the pen
https://codepen.io/vishal2801/pen/ExZJOPK

Thanks in Advance.

Answer 1

Give your side bar class the following css:

<div class="sidebar">
    Content here
</div>

<style>
.sidebar {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1020;
}
</style>

Answer 2

change in css{position: fixed} For more info, https://www.w3schools.com/css/css_positioning.asp