「position: sticky;」より便利！スクロールしたらヘッダやサイドバーがぴたっと貼り付くスクリプト -Fixed Sticky

HTMLは汚さずに、ヘッダ、ナビゲーション、サイドバー、ボタンなど、さまざまな要素をスクロールした際に指定した位置にぴたっと貼り付けるスクリプトを紹介します。 IE7+からサポートされており、「position: sticky;」の代替になる便利なスクリプトです。 Fixed Sticky- GitHub Fixed Stickyの特徴 Fixed Stickyのデモ Fixed Stickyの使い方 Fixed Stickyの特徴 Fixed Stickyで貼り付ける要素の位置は、親要素に依存します。 つまり、スクロールしてぴたっと貼り付く位置は、常に親要素となるコンテナ内です。 基本的な動作を見てみましょう。 まずは、要素に「top: 20px;」を指定してみます。

[tohokuaiki]

上にメニューが張り付きで出るやつ。...と思ったら、既にモダンブラウザではposition:stickyが実装されていたからプロジェクトがdeprecated宣言されていたでござる。

[tsuki-rs]

結局JS使ってるやん・・・

[bleu-bleut]

position: stickeyなんてあるんだ。

[o9ra]

固定 fixed

[norando]

様子見つつ今後のブラウザ対応に期待