To make your content stick to the top of the page, you can utilize the CSS property position: sticky along with top: 0.
If you want to add some space above the sticky content, you can adjust the value in top:50px according to your preference.
This technique will ensure that the content remains fixed at the top of the viewport when scrolled.
div{display: block;}
.some_top_content {
width: 100%;
height: 100px;
background: yellow;
}
.container::after {
clear: both;
display: table;
content: '';
}
*{box-sizing: border-box;}
.left_content {
height: 800px;
float: left;
width: 48%;
margin-right: 4%;
background: blue;
}
.right_content {
width: 48%;
float: right;
position: sticky;
top: 0;
height: 400px;
background: green;
}
.some_bottom_content {
width: 100%;
height: 600px;
background: red;
}
<div class="some_top_content"></div>
<div class="container">
<div class="left_content"></div>
<div class="right_content"></div>
</div>
<div class="some_bottom_content"></div>
PS: Make sure to run this snippet in full-page view for optimal results.
Check out the Codepen example here