D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
gpetrioli
Full window
Github gist
position sticky page layout
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>GistRun</title> <style> * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } .page-header, .page-footer { height: 50px; background-color: #ccc; } .page-layout { display: flex; justify-content: space-between; align-items: flex-start; margin: 16px 0; } .page-layout-nav, .page-layout-main, .page-layout-aside { border: 1px dotted; } .page-layout-nav { order: 0; width: calc(25% - 16px); align-self: flex-start; } .page-layout-main { order: 1; width: 50%; } .page-layout-aside { order: 2; width: calc(25% - 16px); } .page-layout-nav, .page-layout-aside { position: sticky; top: 16px; bottom: 16px; overflow: auto; max-height: calc(100vh - 50px - 16px - 16px); /* not quite right... */ } </style> </head> <body> <header class="page-header"> Contoso </header> <div class="page-layout"> <main class="page-layout-main"> <h1>Hello World</h1> <p>lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. </p> <h2>Foo</h2> <p>lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. </p> <h2>Bar</h2> <p>lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. </p> <h2>Foo</h2> <p>lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. </p> <h2>Bar</h2> <p>lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. </p> </main> <nav class="page-layout-nav"> <ul> <li><a href="#">foo</a></li> <li><a href="#">foo</a></li> <li><a href="#">foo</a></li> <li><a href="#">foo</a></li> <li><a href="#">foo</a></li> <li><a href="#">foo</a></li> <li><a href="#">foo</a></li> <li><a href="#">foo</a></li> <li><a href="#">foo</a></li> <li><a href="#">foo</a></li> <li><a href="#">foo</a></li> <li><a href="#">foo</a></li> <li><a href="#">foo</a></li> <li><a href="#">foo</a></li> <li><a href="#">foo</a></li> <li><a href="#">foo</a></li> <li><a href="#">foo</a></li> <li><a href="#">foo</a></li> <li><a href="#">foo</a></li> <li><a href="#">foo</a></li> <li><a href="#">foo</a></li> <li><a href="#">foo</a></li> <li><a href="#">foo</a></li> <li><a href="#">foo</a></li> <li><a href="#">foo</a></li> <li><a href="#">foo</a></li> <li><a href="#">foo</a></li> <li><a href="#">foo</a></li> <li><a href="#">foo</a></li> <li><a href="#">foo</a></li> <li><a href="#">foo</a></li> <li><a href="#">foo</a></li> <li><a href="#">foo</a></li> <li><a href="#">foo</a></li> <li><a href="#">foo</a></li> <li><a href="#">foo</a></li> <li><a href="#">foo</a></li> <li><a href="#">foo</a></li> <li><a href="#">foo</a></li> <li><a href="#">foo</a></li> <li><a href="#">foo</a></li> <li><a href="#">foo</a></li> <li><a href="#">foo</a></li> <li><a href="#">foo</a></li> <li><a href="#">foo</a></li> <li><a href="#">foo</a></li> <li><a href="#">foo</a></li> <li><a href="#">foo</a></li> <li><a href="#">foo</a></li> <li><a href="#">foo</a></li> <li><a href="#">foo</a></li> <li><a href="#">foo</a></li> <li><a href="#">foo</a></li> <li><a href="#">foo</a></li> <li><a href="#">foo</a></li> <li><a href="#">foo</a></li> <li><a href="#">foo</a></li> <li><a href="#">foo</a></li> <li><a href="#">foo</a></li> <li><a href="#">foo</a></li> <li><a href="#">foo</a></li> <li><a href="#">foo</a></li> <li><a href="#">foo</a></li> <li><a href="#">foo</a></li> <li><a href="#">foo</a></li> <li><a href="#">foo</a></li> <li><a href="#">foo</a></li> <li><a href="#">foo</a></li> <li><a href="#">foo</a></li> <li><a href="#">foo</a></li> <li><a href="#">foo</a></li> <li><a href="#">foo</a></li> <li><a href="#">foo</a></li> <li><a href="#">foo</a></li> <li><a href="#">foo</a></li> <li><a href="#">foo</a></li> <li><a href="#">foo</a></li> <li><a href="#">foo</a></li> <li><a href="#">foo</a></li> <li><a href="#">foo</a></li> <li><a href="#">foo</a></li> <li><a href="#">foo</a></li> <li><a href="#">foo</a></li> <li><a href="#">foo</a></li> <li><a href="#">foo</a></li> <li><a href="#">foo</a></li> <li><a href="#">foo</a></li> <li><a href="#">foo</a></li> <li><a href="#">foo</a></li> </ul> </nav> <aside class="page-layout-aside"> <h2>In this article</h2> <ul> <li><a href="#">foo</a></li> <li><a href="#">foo</a></li> <li><a href="#">foo</a></li> <li><a href="#">foo</a></li> <li><a href="#">foo</a></li> <li><a href="#">foo</a></li> <li><a href="#">foo</a></li> </ul> </aside> </div> <footer class="page-footer"> foo bar baz </footer> <script> // function update() { // } // window.addEventListener('scroll', update); // window.addEventListener('resize', update); </script> </body> </html>