Skip to content

Instantly share code, notes, and snippets.

@jdanyow

jdanyow/index.html

Last active December 21, 2017 01:24
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save jdanyow/5b0e670832c94718857914bf713d28e3 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save jdanyow/5b0e670832c94718857914bf713d28e3 to your computer and use it in GitHub Desktop.
Download ZIP
position sticky page layout
Raw
index.html
<!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);
}
.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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment