no-image

JavaScript

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

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

Scroll With Page

Scroll With Page

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

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

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

関連記事

  1. Image Lightbox
  2. JavaScript

    いろんなデザインのツールチップを実装できる「Opentip」

    Opentipはいろんなデザインのツールチップを実装することができるJ…

  3. Swipeshow

    JavaScript

    スワイプにも対応したシンプルなスライドショーを実装できるjQueryプラグイン「Swipeshow」…

    タッチデバイスのスワイプにも対応したシンプルなスライドショーを実装する…

  4. Ace Responsive Menu
  5. Shine

    JavaScript

    ダイナミック(動的)で美しいシャドウを実装できるJSライブラリ「Shine」

    ShineというJavaScriptライブラリが素敵だったのでメモがて…

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

    JavaScript

    jQueryでJavaScriptのfor…inを使ってオブジェクトから値を1つずつ取り…

    JavaScriptにはfor...inというプロパティの数だけ繰り返…

最近の記事

  1. EH-NA0B
  2. KPS-88
  3. Happy Plugs AIR1
  4. cheero Stream 10000mAh
  5. BOSE HOME SPEAKER 300

アーカイブ

PAGE TOP