no-image

JavaScript

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

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

Scroll With Page

Scroll With Page

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

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

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

関連記事

  1. Bara-Bones-Slider

    JavaScript

    優れたカスタマイズ性を有するjQueryスライダー「Bara-Bones-Slider」

    Bara-Bones-Sliderは、優れたカスタマイズ性を有するイメ…

  2. Bricks.js

    JavaScript

    超高速なMasonryレイアウトを実装できる「Bricks.js」

    Bricks.jsは、固定した幅で配置する画像などの要素をすばやく配置…

  3. no-image

    JavaScript

    レスポンシブ対応のシンプルなLightboxプラグイン

    レスポンシブに対応したシンプルなLightboxプラグインを紹介します…

  4. t.js

    JavaScript

    タイプライターで文字を入力するようなテキストエフェクトのjQueryプラグイン「t.js」

    t.jsというjQueryプラグインを使えば、タイプライターで文字を入…

  5. makefixed.js

    JavaScript

    スクロール中に要素を固定配置できるjQueryプラグイン「makefixed.js」

    makefixed.jsはスクロール中に指定した要素を固定配置させるこ…

最近の記事

  1. スタンスミス(EDIFICE/IENA別注)
  2. WI-1000XM2
  3. mill オイルヒーター
  4. Anker PowerWave 10 Pad & Stand セット

アーカイブ

PAGE TOP