jquery.simple-scroll-follow

JavaScript

スクロールに従って要素を固定したり移動したりできる「jquery.simple-scroll-follow」

jquery.simple-scroll-followは、スクロールに従って要素を固定したり移動したりすることができるjQueryプラグインです。サイドバーを固定して表示したり特定のブラウザ幅になったら要素を移動させたりすることが可能です。

jquery.simple-scroll-follow

デモ

デモにはいくつかの種類が用意されています。ベーシックなタイプのものでは、スクロールしていっても「aside」の要素が固定表示されます。

他にも、ベーシックのように「aside」を固定表示しつつも、フッターまでスクロールすると「aside」が隠れてフッターが全域で表示されたり、ブラウザ幅が992pxより小さくなると、横に設置された「aside」が下へ移動したりと、いろんなタイプのデモを見ることができます。

レスポンシブに対応したレイアウトを作りたい時にも活用できそうですね。シンプルながらも、すごくカスタマイズ性の高いjQueryプラグインに仕上がっています。

主なオプションは、limit_elem、min_width、enabledです。ライセンスはMITとのこと。

スクロールしてもサイドバーを固定したり、特定のブラウザ幅のポイントで要素を別の場所に移動させたりしたいという人は、ぜひ「jquery.simple-scroll-follow」を活用されてみてはいかがでしょうか?

jquery.simple-scroll-follow

jQuery gantt軽量なガントチャートを実装できるjQueryプラグイン「jQuery gantt」前のページ

レスポンシブなイメージビューアを実装できる「SmartPhoto.js」次のページSmartPhoto.js

関連記事

  1. megamenu.js

    JavaScript

    レスポンシブでスマートなメガメニューを実装できる「megamenu.js」

    megamenu.jsはjQueryを使ったレスポンシブでスマートなメ…

  2. EasyLoading

    JavaScript

    ローディングアニメーションを手軽に実装できる「EasyLoading」

    EasyLoadingは、ローディングアニメーションを手軽に実装するこ…

  3. jQuery Magnify

    JavaScript

    シンプルで軽量なズーム機能を実装できる「jQuery Magnify」

    jQuery Magnifyはシンプルで軽量なズーム機能を実装すること…

  4. swingdrag

    JavaScript

    jQuery UIのドラッグ機能にスイング効果を加えることができる「swingdrag」

    swingdragは、jQuery UIのドラッグ機能にスイング効果を…

  5. Easy Responsive Tabs to Accordion

    JavaScript

    レスポンシブ対応のタブとアコーディオンで切り替わるjQueryプラグイン「Easy Responsi…

    今すぐにでも使いたいjQueryプラグインを見つけたので備忘録。レスポ…

  6. Simple jQuery Slider

    JavaScript

    シンプルなナビ付きのスライダーを実装できる「Simple jQuery Slider」

    シンプルなスライダーを実装できる「Simple jQuery Slid…

最近の記事

  1. SV-S251
  2. スラウェシ トラジャ
  3. 梅
  4. CAR-HLD12BK

アーカイブ

PAGE TOP