CSSのpositionプロパティのstickyで、要素を配置するサンプルです。
目次
仕様 | positionプロパティのstickyの仕様 |
サンプル | ある位置に来ると指定の要素が縦スクロールと共に動く |
親要素の高さの範囲で動く | |
親要素にoverflow:hiddenがあると動作しない |
positionプロパティのstickyの仕様
position : 値 |
positionプロパティのstickyは、ウィンドウの表示領域を基準として要素を配置します。
値 | 説明 |
---|---|
sticky | ウィンドウの表示領域を基準とした配置になります。 ある位置に来るスクロールと共に動きます。 stickyはねばねばという意味です。 |
値を継承しない |
- 左上にある要素は、サンプルです。表示領域のtopとleftを指定しています。ある位置に来るとスクロールと共に動きます。
- positionプロパティの値として、他にstatic,relative,absolute,fixedがあります。
- 以下はMDNのpositionプロパティのリンクです。
https://developer.mozilla.org/ja/docs/Web/CSS/position
stickyのテスト
ある位置に来ると指定の要素が縦スクロールと共に動く
ある位置(topの30px)に来ると指定の要素が縦スクロールと共に動くサンプルです。
<style>
#box1 {
width: 150px;
height: 30px;
border: 1px solid #000;
background-color: #c4cece;
}
#box2 {
position: sticky;
top: 30px;
left: 20px;
width: 150px;
height: 30px;
border: 1px solid #000;
background-color: #e0ffff;
}
</style>
<body>
<p>positionのテスト</p>
<div id="box1">box1</div>
<div id="box2">box2</div>
<p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p>
<p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p>
<p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p>
</body>
9行目は、position:stickyです。
10行目は、topでウィンドウの上の位置から30pxを超えると要素も下にずれます。
ウィンドウ表示領域の左上を基準にします。
画面イメージは次のようになります。
スクロール前
縦スクロール後
親要素の高さの範囲で動く
stickyは、親要素の高さの範囲でのみ動きます。
<style>
#box1 {
width: 150px;
height: 30px;
border: 1px solid #000;
background-color: #c4cece;
}
#box2 {
position: sticky;
top: 30px;
left: 20px;
width: 150px;
height: 30px;
border: 1px solid #000;
background-color: #e0ffff;
}
#parent{
height:300px;
}
</style>
<body>
<div id="parent">box1
<div id="box1">box1</div>
<div id="box2">box2</div>
</div>
<p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p>
<p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p>
<p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p>
</body>
22行目は、親要素です。
18行目は、heigthが300pxなので300pxのみ縦に動きます。
親要素にoverflow:hiddenがあると動作しない
stickyは、親要素にoverflow:hiddenがあると動作しません。
<style>
#box1 {
width: 150px;
height: 30px;
border: 1px solid #000;
background-color: #c4cece;
}
#box2 {
position: sticky;
top: 30px;
left: 20px;
width: 150px;
height: 30px;
border: 1px solid #000;
background-color: #e0ffff;
}
#parent{
height:300px;
overflow: hidden;
}
</style>
<body>
<div id="parent">box1
<div id="box1">box1</div>
<div id="box2">box2</div>
</div>
<p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p>
<p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p>
<p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p>
</body>
23行目は、親要素です。
19行目は、overflow: hiddenがあるのでstickyは縦に動きません。
関連の記事
CSS positionのrelativeで要素を配置する
CSS positionのabsoluteで要素を配置する
CSS positionのfixedで要素を配置する