<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="contain"> <div class=" container red">red</div> <div class=" container yellow">yellow</div> <div class=" container green">green</div> </div> <div class="anothercontent"></div>

.container{ width: 100px; height: 100px; margin: 0; position: sticky; } .red{ background-color: red; } .yellow{ background-color: yellow; } .green{ background-color: green; } .contain{ height: 1000px; background-color: aqua; } .anothercontent{ background-color: orange; height: 1000px; }