要素をスクロールした際に固定する
便利なプロパティPosition-Stickyの使い方
CSSのposition: sticky;は、要素をスクロールする際に固定された位置に保つためのプロパティです。このプロパティを使用すると、要素は一時的に固定された状態でスクロールされ、指定した位置までスクロールすると固定が解除されます。当サイトのサイドバーもposition: sticky;を使用しております。
実装に際して、注意すべき点にいくつか気づきましたので、詳細をご説明いたします。
position: sticky;の実装
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id="global-container">
<div id="container">
<header>header</header>
<main id="top">
<div id="main-container">
<div class="wrapper">
<div class="content">content</div>
<aside>aside</aside>
</div>
</div>
</main>
<footer>footer</footer>
</div>
</div>
</body>
</html>body {
font-size: 30px;
}
header {
background-color: #3898e0;
display: flex;
justify-content: center;
align-items: center;
height: 100px;
}
.wrapper {
display: flex;
justify-content: space-between;
height: 200vh;
}
.content {
background-color: #a5c1ea;
width: 65%;
display: flex;
justify-content: center;
align-items: center;
}
aside {
width: 30%;
display: flex;
justify-content: center;
align-items: center;
background-color: #d5dfef;
position: sticky;
top: 0;
height: 50vh;
}
footer {
background-color: #cce4ff;
height: 100px;
display: flex;
justify-content: center;
align-items: center;
}プロパティが効かないときのチェックポイント
36行目のHTMLコードでは、top: 0;を使用してposition: sticky;が指定された要素を明確な位置に指定する必要があります。
37行目のHTMLコードでは、指定した要素が機能するためにheightを指定する必要があります。例えば、heigh: 50vh;のように要素の高さを指定します。要素が親要素内で固定されるため、親要素には適切な高さが必要です。
親要素にoverflow: hidden;が指定されていないかを確認してください。overflow: hidden;が指定されている場合、要素がスクロール可能な状態になりません。
ここでいう親要素の対象は、body/global-container/container/main/main-container/wrapperが対象になります。
position: sticky;は一部のブラウザでサポートされていない場合があります。特に、古いバージョンのインターネットエクスプローラーではサポートされていません。使用する場合は、ブラウザの互換性に注意してください。
参考になる動画の紹介
「YouTubeプロントエンドチャンネル」は、武田一真（たけだかずま）さんの動画です。とても参考になる内容です。フロントエンドに関する様々な動画をアップしています。動画のリンクはこちらです。
