CSSだけで行うサイドバーの追従

css sticky すごい便利」という記事を参考にして、サンプルを作ってみました。

position 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 取扱説明書

ブラウザサポート

Can I Use css-sticky? Data on support for the css-sticky feature across the major browsers from caniuse.com.


新着記事

コメントは受け付けていません。