タグ

ブックマーク / blog.hiroyuki90.com (1)

  • 【IE11対応】position sticky でスクロール中に固定表示する方法 | 実践的Web開発メソッド

    スクロール量に応じて、要素を特定の位置に固定表示する方法をご紹介します。 数年前は、Javascriptを利用して、スクロールの量に応じてCSSのposition fixedを付け外しするような事をやっていましたが、position stickyを利用すると簡単に実装することが出来ます。 こちらにPosition Stickyのデモを作成しました。 メディアなどでよく見かけるような、スクロールしてもサイドバーが固定表示されるUIです。 position stickyとはMDN Web Docs によると、下記のように説明されています。 包含ブロックがフロールート (又はその中でスクロールするコンテナー) 内の指定されたしきい値 (例えば top に設定された auto 以外の値など) を達するまでは相対的な配置として扱われ、包含ブロックの反対の端が来るまでその位置に「粘着」するものとして扱

    【IE11対応】position sticky でスクロール中に固定表示する方法 | 実践的Web開発メソッド
  • 1