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. CollagePlus

    JavaScript

    画像を綺麗に整列させるjQueryプラグイン「CollagePlus」

    画像を綺麗に整列させる便利なjQueryプラグイン「CollagePl…

  2. Shorten

    JavaScript

    長いテキストを自動で短縮してくれるjQueryプラグイン「Shorten」

    Shortenは指定した文字数以上の長いテキストを自動的に短縮してくれ…

  3. Listt

    JavaScript

    リストをiOSのようにアニメーションできるjQueryプラグイン「Listt」

    ListtはリストをiOSのセレクトボックスのようにアニメーションさせ…

  4. FSVS(Full Screen Vertical Scroller)
  5. no-image

    JavaScript

    ミニマルなイメージギャラリーを実装できる「Albery」

    Alberyはミニマルなイメージギャラリーを実装できるjQueryプラ…

  6. jQuery toTop()

    JavaScript

    シンプル・軽量でカスタマイズもできる滑らかなスクロール「jQuery toTop()」

    jQuery toTop()はトップへ行くための滑らかなスクロールを実…

最近の記事

  1. ダミアン・ハースト 桜
  2. パッキングエリア
  3. あらびきソーセージパイ
  4. REACH フロス
PAGE TOP