スクロールしても付いてくるボックスを実装する「Sticky-Kit」

「Sticky-Kit」はスクロールしても付いてくるエレメントを実装出来るjQueryプラグインです。ブログでよく見かけるスクロールしても付いてくるサイドバーなどを実装できます。

Sticky-Kit

sticky-kit

Stickという英単語がスクロールしても付いてくるエレメントを指すようです。Stickyがその形容詞で、そのまま日本語に訳すと「粘着する、ねばねばする」という意味。確かに、スクロールしてもついてくるあたりを言い表しています。

 

まずはこの状態。

sticky-kit-demo-1

 

スクロールさせると赤線で描かれたボックスがStickyします。

sticky-kit-demo-2

 

さらにスクロールさせると、その下に控えるStickがStickyします。stickyさせたり、解除させたりで複雑に組めるので、面白いサイト構成が作れそう。

sticky-kit-demo-3

 

 

それでは「Sticky-Kit」の実装方法をご紹介します。まずはjQuery含む外部ファイルを読み込みます。

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="jquery.sticky-kit.min.js"></script>

 

HTMLはこのようにマークアップします。今回はsidebarをStickyさせることにしました。

<div id="container">
  <div id="sidebar">
    stick
  </div>
  <div id="main">
    main
  </div>
</div>

 

CSSはこのように指定しました。sidebarがStickyしているか確認するために、main側を縦に長くしておきます。

#sidebar {
  width: 180px;
  height: 200px;
  float: left;
  background-color: red;
}
#main {
  width: 400px;
  height: 1500px;
  float: left;
  background-color: green;
}

 

JavaScriptはこのように実装します。

$("#sidebar").stick_in_parent();

 

するとこのように作ることが出来ました。まずはロード後の状態。

Sticky-Kit-sample-1

 

スクロールさせるとmain側はスクロールし、stick側はくっついてきます。

Sticky-Kit-sample-2

 

とても簡単に実装することができました。このブログにも取り込んでみようかな。サイドバーだけでなく、色々な使い方ができます。ぜひ試してみてください。

 

Home > JavaScript > スクロールしても付いてくるボックスを実装する「Sticky-Kit」

Return to page top