position:stickyでデカい表が便利（最近便利なCSSおれおれAdvent Calendar 2023 – 17日目） | Ginpen.com
最近便利なCSSおれおれAdvent Calendar 2023 – 17 日目 大きな表ってスクロールするとヘッダーが見えなくて「この値は何だっけ」ってなりますよね。position:sticky が出たときは便利じゃんと思ったのに表には使えませんでした。今は行けます。行こう。 例 デモ：https://codepen.io/ginpei/pen/Exrqxom ヘッダーだけじゃなくて、一番左側の列を固定するのも良いかも。 付与先 <th> に付けるのが普通かなと思うんだけど、<thead> とかに付けてもいいです。 注意 overflow: hidden ではなく overflow: clip を position: sticky を書いても位置が粘着しない場合、だいたい上位に overflow: hidden があるのが原因です。 レイアウトの都合上はみ出すとよろしくないので付けてる
CSS エリア内でコンテンツが追従する position:sticky; の使い方 - by Takumi Hirashima
CSS 指定エリア内でコンテンツが追従する position:sticky; の使い方を紹介します。 例えば、サイドバー内の要素をスクロールに合わせて追従させたい時に便利な方法です。 指定エリア内でコンテンツを追従させる方法 position:sticky; が動作しない時の対処方法 指定エリア内でコンテンツを追従させる方法 スクロールに合わせたコンテンツの追従は、jQuery をトリガーに、position:fixed; を付与するような実装方法がよく知られています。 けれど CSS の position:sticky; を使うと、CSSの記述だけで実装することができます。 例えば、サイドバーにあるバナーエリアを、スクロールに合わせて追従するようにするには、次のコードをバナーエリアに追加します。 .banner { position: sticky; top: 0; } まず posit
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
