<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="container"> <article> <div class="container-fluid"> <div class="row"> <div class="col"> <div class="title-section"> <h1>Multiple Stacking Sticky Sidebars with Bootstrap 4</h1> <p class="lead">This is 100% CSS</p> </div> </div> </div> <div class="row"> <div class="col-1 has-10-items"> <div class="sidebar-item"> <div class="make-me-sticky"> <h4>Item 1</h4> </div> </div> <div class="sidebar-item"> <div class="make-me-sticky"> <h4>Item 2</h4> </div> </div> <div class="sidebar-item"> <div class="make-me-sticky"> <h4>Item 3</h4> </div> </div> <div class="sidebar-item"> <div class="make-me-sticky"> <h4>Item 4</h4> </div> </div> <div class="sidebar-item"> <div class="make-me-sticky"> <h4>Item 5</h4> </div> </div> <div class="sidebar-item"> <div class="make-me-sticky"> <h4>Item 6</h4> </div> </div> <div class="sidebar-item"> <div class="make-me-sticky"> <h4>Item 7</h4> </div> </div> <div class="sidebar-item"> <div class="make-me-sticky"> <h4>Item 8</h4> </div> </div> <div class="sidebar-item"> <div class="make-me-sticky"> <h4>Item 9</h4> </div> </div> <div class="sidebar-item"> <div class="make-me-sticky"> <h4>Item 10</h4> </div> </div> </div> <div class="col-5"> <div class="content-section"> <h2>Content Section</h2> </div> </div> <div class="col-3 has-4-items"> <div class="sidebar-item"> <div class="make-me-sticky"> <h3>Item 1</h3> </div> </div> <div class="sidebar-item"> <div class="make-me-sticky"> <h3>Item 2</h3> </div> </div> <div class="sidebar-item"> <div class="make-me-sticky"> <h3>Item 3</h3> </div> </div> <div class="sidebar-item"> <div class="make-me-sticky"> <h3>Item 4</h3> </div> </div> </div> <div class="col-2 has-2-items"> <div class="sidebar-item"> <div class="make-me-sticky"> <h3 class="alt">Item 1</h3 class="alt"> </div> </div> <div class="sidebar-item"> <div class="make-me-sticky"> <h3 class="alt">Item 2</h3 class="alt"> </div> </div> </div> <div class="col-1 has-3-items"> <div class="sidebar-item"> <div class="make-me-sticky"> <h5>Item 1</h5> </div> </div> <div class="sidebar-item"> <div class="make-me-sticky"> <h5>Item 2</h5> </div> </div> <div class="sidebar-item"> <div class="make-me-sticky"> <h5>Item 3</h5> </div> </div> </div> </div> </div> </article> <article> <div class="container-fluid"> <div class="row"> <div class="col-3"> <div class="content-section"> <h2>Content Section</h2> </div> </div> <div class="col-2 has-3-items"> <div class="sidebar-item"> <div class="make-me-sticky"> <h5>Item 1</h5> </div> </div> <div class="sidebar-item"> <div class="make-me-sticky"> <h5>Item 2</h5> </div> </div> <div class="sidebar-item"> <div class="make-me-sticky"> <h5>Item 3</h5> </div> </div> </div> <div class="col-2 has-4-items"> <div class="sidebar-item"> <div class="make-me-sticky"> <h3>Item 1</h3> </div> </div> <div class="sidebar-item"> <div class="make-me-sticky"> <h3>Item 2</h3> </div> </div> <div class="sidebar-item"> <div class="make-me-sticky"> <h3>Item 3</h3> </div> </div> <div class="sidebar-item"> <div class="make-me-sticky"> <h3>Item 4</h3> </div> </div> </div> <div class="col-2 has-2-items"> <div class="sidebar-item"> <div class="make-me-sticky"> <h3 class="alt">Item 1</h3 class="alt"> </div> </div> <div class="sidebar-item"> <div class="make-me-sticky"> <h3 class="alt">Item 2</h3 class="alt"> </div> </div> </div> <div class="col-3 has-10-items"> <div class="sidebar-item"> <div class="make-me-sticky"> <h4>Item 1</h4> </div> </div> <div class="sidebar-item"> <div class="make-me-sticky"> <h4>Item 2</h4> </div> </div> <div class="sidebar-item"> <div class="make-me-sticky"> <h4>Item 3</h4> </div> </div> <div class="sidebar-item"> <div class="make-me-sticky"> <h4>Item 4</h4> </div> </div> <div class="sidebar-item"> <div class="make-me-sticky"> <h4>Item 5</h4> </div> </div> <div class="sidebar-item"> <div class="make-me-sticky"> <h4>Item 6</h4> </div> </div> <div class="sidebar-item"> <div class="make-me-sticky"> <h4>Item 7</h4> </div> </div> <div class="sidebar-item"> <div class="make-me-sticky"> <h4>Item 8</h4> </div> </div> <div class="sidebar-item"> <div class="make-me-sticky"> <h4>Item 9</h4> </div> </div> <div class="sidebar-item"> <div class="make-me-sticky"> <h4>Item 10</h4> </div> </div> </div> </div> </div> </article> <article> <div class="container-fluid"> <div class="row"> <div class="col-1 has-10-items"> <div class="sidebar-item"> <div class="make-me-sticky"> <h4>Item 1</h4> </div> </div> <div class="sidebar-item"> <div class="make-me-sticky"> <h4>Item 2</h4> </div> </div> <div class="sidebar-item"> <div class="make-me-sticky"> <h4>Item 3</h4> </div> </div> <div class="sidebar-item"> <div class="make-me-sticky"> <h4>Item 4</h4> </div> </div> <div class="sidebar-item"> <div class="make-me-sticky"> <h4>Item 5</h4> </div> </div> <div class="sidebar-item"> <div class="make-me-sticky"> <h4>Item 6</h4> </div> </div> <div class="sidebar-item"> <div class="make-me-sticky"> <h4>Item 7</h4> </div> </div> <div class="sidebar-item"> <div class="make-me-sticky"> <h4>Item 8</h4> </div> </div> <div class="sidebar-item"> <div class="make-me-sticky"> <h4>Item 9</h4> </div> </div> <div class="sidebar-item"> <div class="make-me-sticky"> <h4>Item 10</h4> </div> </div> </div> <div class="col-5"> <div class="content-section"> <h2>Content Section</h2> </div> </div> <div class="col-3 has-4-items"> <div class="sidebar-item"> <div class="make-me-sticky"> <h3>Item 1</h3> </div> </div> <div class="sidebar-item"> <div class="make-me-sticky"> <h3>Item 2</h3> </div> </div> <div class="sidebar-item"> <div class="make-me-sticky"> <h3>Item 3</h3> </div> </div> <div class="sidebar-item"> <div class="make-me-sticky"> <h3>Item 4</h3> </div> </div> </div> <div class="col-2 has-2-items"> <div class="sidebar-item"> <div class="make-me-sticky"> <h3 class="alt">Item 1</h3 class="alt"> </div> </div> <div class="sidebar-item"> <div class="make-me-sticky"> <h3 class="alt">Item 2</h3 class="alt"> </div> </div> </div> <div class="col-1 has-3-items"> <div class="sidebar-item"> <div class="make-me-sticky"> <h5>Item 1</h5> </div> </div> <div class="sidebar-item"> <div class="make-me-sticky"> <h5>Item 2</h5> </div> </div> <div class="sidebar-item"> <div class="make-me-sticky"> <h5>Item 3</h5> </div> </div> </div> </div> </div> </article> <article> <div class="container-fluid"> <div class="row"> <div class="col-3"> <div class="content-section"> <h2>Content Section</h2> </div> </div> <div class="col-2 has-3-items"> <div class="sidebar-item"> <div class="make-me-sticky"> <h5>Item 1</h5> </div> </div> <div class="sidebar-item"> <div class="make-me-sticky"> <h5>Item 2</h5> </div> </div> <div class="sidebar-item"> <div class="make-me-sticky"> <h5>Item 3</h5> </div> </div> </div> <div class="col-2 has-4-items"> <div class="sidebar-item"> <div class="make-me-sticky"> <h3>Item 1</h3> </div> </div> <div class="sidebar-item"> <div class="make-me-sticky"> <h3>Item 2</h3> </div> </div> <div class="sidebar-item"> <div class="make-me-sticky"> <h3>Item 3</h3> </div> </div> <div class="sidebar-item"> <div class="make-me-sticky"> <h3>Item 4</h3> </div> </div> </div> <div class="col-2 has-2-items"> <div class="sidebar-item"> <div class="make-me-sticky"> <h3 class="alt">Item 1</h3 class="alt"> </div> </div> <div class="sidebar-item"> <div class="make-me-sticky"> <h3 class="alt">Item 2</h3 class="alt"> </div> </div> </div> <div class="col-3 has-10-items"> <div class="sidebar-item"> <div class="make-me-sticky"> <h4>Item 1</h4> </div> </div> <div class="sidebar-item"> <div class="make-me-sticky"> <h4>Item 2</h4> </div> </div> <div class="sidebar-item"> <div class="make-me-sticky"> <h4>Item 3</h4> </div> </div> <div class="sidebar-item"> <div class="make-me-sticky"> <h4>Item 4</h4> </div> </div> <div class="sidebar-item"> <div class="make-me-sticky"> <h4>Item 5</h4> </div> </div> <div class="sidebar-item"> <div class="make-me-sticky"> <h4>Item 6</h4> </div> </div> <div class="sidebar-item"> <div class="make-me-sticky"> <h4>Item 7</h4> </div> </div> <div class="sidebar-item"> <div class="make-me-sticky"> <h4>Item 8</h4> </div> </div> <div class="sidebar-item"> <div class="make-me-sticky"> <h4>Item 9</h4> </div> </div> <div class="sidebar-item"> <div class="make-me-sticky"> <h4>Item 10</h4> </div> </div> </div> </div> </div> </article> </div>

.content-section { min-height: 2000px; } .sidebar-section { position: absolute; height: 100%; width: 100%; } .sidebar-item { position: absolute; top: 0; left: 0; width: 100%; } .has-4-items .sidebar-item { height: 25%; } .has-4-items .sidebar-item:nth-child(2) { top: 25%; } .has-4-items .sidebar-item:nth-child(3) { top: 50%; } .has-4-items .sidebar-item:nth-child(4) { top: 75%; } .has-3-items .sidebar-item { height: 33.333333%; } .has-3-items .sidebar-item:nth-child(2) { top: 33.333333%; } .has-3-items .sidebar-item:nth-child(3) { top: 66.666666%; } .has-2-items .sidebar-item { height: 50%; } .has-2-items .sidebar-item:nth-child(2) { top: 50%; } .has-10-items .sidebar-item { height: 10%; } .has-10-items .sidebar-item:nth-child(2) { top: 10%; } .has-10-items .sidebar-item:nth-child(3) { top: 20%; } .has-10-items .sidebar-item:nth-child(4) { top: 30%; } .has-10-items .sidebar-item:nth-child(5) { top: 40%; } .has-10-items .sidebar-item:nth-child(6) { top: 50%; } .has-10-items .sidebar-item:nth-child(7) { top: 60%; } .has-10-items .sidebar-item:nth-child(8) { top: 70%; } .has-10-items .sidebar-item:nth-child(9) { top: 80%; } .has-10-items .sidebar-item:nth-child(10) { top: 90%; } .make-me-sticky { position: -webkit-sticky; position: sticky; top: 0; padding: 0 15px; } /* Ignore This, just coloring */ body { background: #fff; } article { background: #f1f1f1; border-radius: 12px; padding: 25px 0; } .title-section, .content-section, .sidebar-section { background: #fff; } .title-section { text-align: center; padding: 50px 15px; margin-bottom: 30px; } .content-section h2 { text-align: center; margin: 0; padding-top: 200px; } .sidebar-item { text-align: center; } .sidebar-item h3 { background: gold; max-width: 100%; margin: 0 auto; padding: 50px 0 100px; border-bottom: solid 1px #fff; } .sidebar-item h3.alt { background: pink; } .sidebar-item h4 { padding: 25px 0; background: orange; border-bottom: solid 1px #fff; font-size: 12px; } .sidebar-item h5 { padding: 25px 0; background: lightgreen; border-bottom: solid 1px #fff; font-size: 12px; } body { padding-bottom: 1000px; }