タグ

2021年5月15日のブックマーク (1件)

  • scrollに応じて要素を固定/解除するCSS「position: sticky」とpolyfill「sticky-state」の紹介(脱jQuery)

    当ブログでは、画面をスクロールすると途中でサイドバーを固定/解除する機能を実装しています。もともとこの機能をJavaScript(jQuery)で独自に実装していました。今回のこのサイドバー固定/解除機能をCSSの「position: sticky」で実装し直すことにしました。いわゆる脱jQueryです。スクロールが絡むJavaScriptの処理は、イベントが頻発するためにブラウザに負荷をかけやすいです。今回CSSの「position: sticky」で実装し直したことで、ブラウザに優しいページになったんじゃないかなと思っています。今回はこの「position: sticky」でのサイドバー固定機能の実装方法と、polyfill「sticky-state」の使い方を紹介したいと思います。 はじめに当ブログでは、ページをスクロールすると途中で「サイドバー」が画面に固定されるようになっています

    scrollに応じて要素を固定/解除するCSS「position: sticky」とpolyfill「sticky-state」の紹介(脱jQuery)
    sugarte
    sugarte 2021/05/15
    position: stickyのpolyfill。思ったようにいかなかったので使用をやめた。