Frontend Scripts管理者

固定表示／追従表示／追尾表示

解決策

固定表示と言えば、

position: fixed

これだと、固定する範囲を指定したい場合は、JSが必要。

position: absolute

でもできなくない。

でも

position: sticky

がスマートでしょう。

これらの違いは

position

The CSS property sets how an element is positioned in a document. The , , , and properties determine the final location of positioned elements. A positioned element is an element whose computed position value is either relative, absolute, fixed, or sticky. (In other words, it’s anything except static.)

で見てみよう。

absolute

The element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to its closest positioned ancestor, if any; otherwise, it is placed relative to the initial containing block. Its final position is determined by the values of top, right, bottom, and left.
This value creates a new stacking context when the value of z-index is not auto. The margins of absolutely positioned boxes do not collapse with other margins.

developer.mozilla.org

直近でrelative設定された祖先要素に対して相対的に配置される。

fixed

The element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to the initial containing block established by the viewport, except when one of its ancestors has a transform, perspective, or filter property set to something other than none (see the CSS Transforms Spec), in which case that ancestor behaves as the containing block. (Note that there are browser inconsistencies with perspective and filter contributing to containing block formation.) Its final position is determined by the values of top, right, bottom, and left.
This value always creates a new stacking context. In printed documents, the element is placed in the same position on every page.

developer.mozilla.org

Viewportで決められた初期ブロックから相対的に配置される。

sticky

The element is positioned according to the normal flow of the document, and then offset relative to its nearest scrolling ancestor and containing block (nearest block-level ancestor), including table-related elements, based on the values of top, right, bottom, and left. The offset does not affect the position of any other elements.
This value always creates a new stacking context. Note that a sticky element “sticks” to its nearest ancestor that has a “scrolling mechanism” (created when overflow is hidden, scroll, auto, or overlay), even if that ancestor isn’t the nearest actually scrolling ancestor. This effectively inhibits any “sticky” behavior (see the Github issue on W3C CSSWG).

developer.mozilla.org

通常のドキュメントフローに沿って配置される。固定要素は「スクローリングメカニズム」を持つ直近の祖先要素に「stick」される。

IE対応

例によって？！IEでは動かない。

【IE11対応】position sticky でスクロール中に固定表示する方法

スクロール量に応じて、要素を特定の位置に固定表示する方法をご紹介します。 数年前は、Javascriptを利用して、スクロールの量に応じてCSSの position fixedを付け外しするような事をやっていましたが、 position sticky を利用すると簡単に実装することが出来ます。 こちらに Position Stickyのデモを作成しました。 メディアなどでよく見かけるような、スクロールしてもサイドバーが固定表示されるUIです。 MDN Web Docs によると、下記のように説明されています。 包含ブロックがフロールート (又はその中でスクロールするコンテナー) 内の指定されたしきい値 (例えば top に設定された auto 以外の値など) を達するまでは相対的な配置として扱われ、包含ブロックの反対の端が来るまでその位置に「粘着」するものとして扱われます。 引用元: position – CSS: カスケーディングスタイルシート | MDN ちょっとわかりづらいですが、 position stickyを指定すると親のコンテナ要素（ position relative）を基準にして、 topで指定された位置までは通常の表示として扱われ、 top で指定された位置から画面内に固定表示として扱われるようです。 スクロール量に応じて固定表示したいケースにドンピシャで利用できますね。 また、このように表示する要素のことを 粘着位置指定要素 というようです。 Can I Useでブラウザサポート状況について確認すると、上記のようになっています。 IEでサポートされていませんが、Polyfillを利用することでIEでも対応することが出来ます。 実装方法は非常に簡単です。 Position Stickyのデモをもとに説明します。

以下を読み込めば大丈夫。

wilddeer/stickyfill

The most accurate sticky polyfill out in the wild. Check out the demo and use cases test page.

Deprecated！！

JSライブラリあるだと思って調べて辿り着いたらDeprectaed！！！

CSSでやった方が良いでしょう。

filamentgroup/fixed-sticky

In our own designs we use sticky sparingly and as an enhancement, which means that fallback positioning behavior is acceptable. With native browser support for position: sticky expanding, we must weigh the diminishing cross-section of browsers that require this polyfill against this plugin’s own maintenance costs.

RECOMMENDこちらの記事も人気です。