<pre lang="HTML"><pre> <div class="sticky-sidebar"> <h1><small>Day #15</small> Sticky Sidebar <small>Final Version</small></h1> <div class="sandbox"> <h2>Sandbox <small>This is where you play</small></h2> <div class="content"> <a href="student.html" class="button-theme"><small>Click here to</small>View the student version</a><br> <a href="index.html" class="button-theme"><small>Click here to</small>View the info page</a> <h3>Lots of filler text to make the page long.</h3> <p></p> <p></p> <p></p> </div> </div> <div class="sticky-sidebar1"> <h4>Sticky sidebar!</h4> <p>Scroll down to see.</p> </div> </div>
.sticky-sidebar { width: 80%; margin: 0 auto; margin-bottom: 600px; } .sticky-sidebar::after { display: table; content: ""; clear: both; } .sticky-sidebar .sandbox { width: 60%; margin: 0 0 40px; float: left; } .sticky-sidebar1 { background: #fff; padding: 40px 40px 60px; box-sizing: border-box; border-radius: 2px; box-shadow: 0 20px 20px 0 rgba(0,0,0,.05); position: fixed; right: 5%; width: 36%; float: right; }
sticky-sidebar
.sticky-sidebar1 { ... position: sticky; top: 0; ... }
var
This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)