「css sticky すごい便利」という記事を参考にして、サンプルを作ってみました。
<!doctype html>
<head>
<meta charset="utf-8">
<title>example position:sticky</title>
<style type="text/css">
main{
width:70%;
float:left;
}
nav{
width:25%;
float:right;
}
main,nav{
position: sticky;
top: 0px;
}
header,
article{
box-sizing:border-box;
padding:0 1em;
}
.header-image,
article{
border:1px solid #ccc;
margin-bottom:1em;
}
nav li{
line-height:2;
}
.header-image:before{
line-height:200px;
display:block;
text-align:center;
font-size:4vmin;
}
@media screen and (max-width : 43em ){
main,
nav{
float:none;
width:auto;
position:static;
}
}
@supports not (position:sticky) {
.header-image:before{
content:'Browser: Not Support Position:sticky';
color:red;
}
}
@supports (position:sticky) {
.header-image:before{
content:'Browser: Support Position:sticky';
color:black;
}
}
</style>
</head>
<body>
<div class="wrapper">
<header class="bar">
<h1>Sticky Sidebar</h1>
</header>
<div class="header-image" style="height:200px;background:#cde;"></div>
<main>
<article>
<h2>Example</h2>
<p>
One of the blocks. Lorem ipsum dolor
sit amet, consectetuer adipiscing elit,
sed diam nonummy nibh euismod tincidunt ut
laoreet dolore magna aliquam erat volutpat.
</p>
</article>
<article>
<h2>Example</h2>
<p>
One of the blocks. Lorem ipsum dolor
sit amet, consectetuer adipiscing elit,
sed diam nonummy nibh euismod tincidunt ut
laoreet dolore magna aliquam erat volutpat.
</p>
</article>
...
<article>
<h2>Example</h2>
<p>
One of the blocks. Lorem ipsum dolor
sit amet, consectetuer adipiscing elit,
sed diam nonummy nibh euismod tincidunt ut
laoreet dolore magna aliquam erat volutpat.
</p>
</article>
</main>
<nav>
<ul>
<li>
<a href="">list item</a>
</li>
<li>
<a href="">list item</a>
</li>
...
<li>
<a href="">list item</a>
</li>
</ul>
</nav>
<br style="clear:both;" />
</div>
<footer class="bar">
<address>http://d.hatena.ne.jp/tenman/</address>
</footer>
</body>
</html>
関連
デフォルトサイドバーを追従型にカスタマイズする。 – Raindrops 取扱説明書