no-image

JavaScript

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

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

Scroll With Page

Scroll With Page

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

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

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

jquery-backToTopカスタマイズ性に優れたトップへ戻るボタンを実装できる「jquery-backToTop」前のページ

カードを入れ替えるような3Dアニメーションによるスライダー「stack-slider」次のページno-image

関連記事

  1. JavaScript

    フルスクリーンで画像などの要素を表示させることができるJSライブラリ「screenfull.js」

    screenfull.jsは画像などの要素をフルスクリーンで表示させる…

  2. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQueryのfocusとblurを使えばフォームが便利になる

    jQueryのfocusとblurを使えばフォームを便利にすることがで…

  3. flexImages

    JavaScript

    軽量でFlickrやGoogle画像検索のようなギャラリーのjQueryプラグイン「flexImag…

    flexImagesというjQueryプラグインを使えば、軽量でレスポ…

  4. Square Menu
  5. Bootstrap Dropdown Hover
  6. jQuery Scrollify

    JavaScript

    セクションごとにスクロールしてくれる「jQuery Scrollify」

    jQuery Scrollifyはセクションごとにスクロールしてくれる…

最近の記事

  1. 田沢湖
  2. ゴムの耳栓
  3. ライオンコーヒー(バニラマカダミア)
PAGE TOP