方法-スティッキーエレメント
CSSを使用してスティッキー要素を作成する方法を学びます。
注:この例は、InternetExplorerまたはEdge15以前のバージョンでは機能しません。
スティッキーエレメント
例
div.sticky {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
}
の要素position: sticky;
は、ユーザーのスクロール位置に基づいて配置されます。
スティッキー要素は、スクロール位置に応じてrelative
との間で切り替わります。fixed
ビューポートで特定のオフセット位置に達するまで相対位置に配置されます。その後、所定の位置に「固定」されます(position:fixedなど)。
注: Internet Explorer、Edge 15以前のバージョンは、スティッキーポジショニングをサポートしていません。Safariには-webkit-プレフィックスが必要です(以下の例を参照)。また、スティッキーポジショニングを機能させるには、、、top
の少なくとも1つを指定する必要があります。right
bottom
left
CSSポジショニングの詳細については、 CSS位置チュートリアルをお読みください。