親要素の下端まで要素を固定表示できる「Scroll With Page」

no-image

Scroll With Pageはスクロールしても特定の要素を固定表示したままにできるjQuery拡張機能です。おもしろいのは親要素の制約を受けることができるという点です。これにより、固定表示できる領域を親要素の下端までにすることができます。

Scroll With Page

Scroll With Page

デモでは親コンテナ内にサイドバーウィジェットが設置されています。下にスクロールしていくとこのサイドバーウィジェットは固定表示されたままになりますが、親コンテナの下端までスクロールされると、それ以降は親コンテナとともに上に上がっていきます。

親要素の制約に依存するので、必ずしもページのどの位置にいても常に固定表示されるというわけではありません。親要素の制約を利用して、特定の領域まで固定表示したい要素がある場合にはとても便利な機能になりますね。

というわけで、親要素の制約に制限された固定表示機能を実装できる「Scroll With Page」の紹介でした。

スポンサーリンク

スポンサーリンク

アクセスランキング

Tags

Archives