JavaScript

スクロールしても固定表示されてついてくるjQueryプラグイン「Sticky」

StickyというjQueryプラグインを使えば、スクロールしても固定表示されてついてくる機能を実装することができます。よく見かける上部に固定されたナビゲーションなどといったあれですね。あったらあったで何気に便利ですからね。

[ads_center]

Stickyの使い方

以下からダウンロード、もしくは実際のデモを確認することができます。

Sticky

Sticky

使い方は、jQuery本体とStickyを読み込みます。

<script src="jquery.js"></script>
<script src="jquery.sticky.js"></script>

あとは固定したい要素をセレクタに指定してセットするだけです。

$(document).ready(function(){
    $("#sample").sticky({topSpacing:0});
});

とても手軽で簡単に使うことができます。

メニューやボタンなど色んな要素をスクロールしてもついてくるように固定したい時に覚えておきたいjQueryプラグインですね。

FSVS(Full Screen Vertical Scroller)シンプルなフルスクリーンのスクロールを実装できるjQueryプラグイン「FSVS(Full Screen Vertical Scroller)」前のページ

いい感じのiPhone6・iPhone6 PlusのPSDモックアップ素材集(フリー)次のページ

関連記事

  1. VenoBox

    JavaScript

    画像・Google マップ・YouTubeなどを埋め込めるLightbox風jQueryプラグイン「…

    VenoBoxは色んなコンテンツを埋め込めるLightbox風jQue…

  2. no-image

    JavaScript

    SVGによるドーナッツ状(円形)のチャートを実装できる「donutty」

    donuttyはSVGによるドーナッツ状(円形)のチャートを実装できる…

  3. Simple Modal

    JavaScript

    レスポンシブ対応の軽量・シンプルなモーダル「Simple Modal」

    Simple Modalはレスポンシブに対応した軽量でシンプルなモーダ…

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

    JavaScript

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

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

  5. JavaScript

    レスポンシブなテキストを実装できるjQueryプラグイン「Responsive Text」

    Responsive TextというjQueryプラグインを使えば、と…

  6. no-image

    JavaScript

    プレーンなJavaScriptによるレスポンシブなLightbox「jsOnlyLightbox」

    jsOnlyLightboxは、jQueryなどを必要としないプレーン…

最近の記事

  1. 200-DGBG020
  2. Anker PowerPort 5-in-1 37.5W Hub
  3. α7C + FE28-60mm F4-5.6

アーカイブ

PAGE TOP