<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="spacer"></div> <div class="wrap"> <div> <div class="sticky"> <h1>tesst 1</h1> <p>lorem ipsum</p> </div> </div> <div></div> </div> <div class="wrap"> <div> <div class="sticky"> <h1>tesst 2</h1> <p>lorem ipsum</p> </div> </div> <div></div> </div> <div class="wrap"> <div> <div class="sticky"> <h1>tesst 3</h1> <p>lorem ipsum</p> </div> </div> <div></div> </div> <div class="spacer"></div>

.spacer { height: 40vh; } .wrap { display: flex; /*align-items: flex-start;*/ } .wrap > div { flex: 1; text-align: center; } /*.wrap > div:nth-child(1) { position: -webkit-sticky; position: sticky; top: 0; padding-top: 100px; }*/ .sticky { position: -webkit-sticky; position: sticky; top: 0; padding: 100px 0; } .wrap > div:nth-child(2) { background: red; height: 200vh; }