タグ

ブックマーク / www.miso.blog (1)

  • 【CSS】position: stickyでスクロールに追従する要素を作る | misoblog

    当ブログの右側のサイドバーと下部のシェアボタンは、スクロールしても固定されて付いてくるようになってます。 これまでは、この手の仕組みはjQueryで実装してましたが、今回はCSS3で新たに追加された「position: sticky」を使って実装してみました。 position: stickyとはpositionプロパティの新しい値です。 「position: sticky」と位置(top, right, bottom, left)を指定して、固定したい要素が指定した位置にくると「fixed」のように振る舞い、それ以外だと「relative」になる、という感じです。 一応、以下に簡単なデモを作ってみました。 See the Pen position: sticky by miso (@misodtm) on CodePen. このブログでは下記のように指定してます。 HTML <div c

    【CSS】position: stickyでスクロールに追従する要素を作る | misoblog
  • 1