スクロールしてもついてくる要素を指定「Sticky-kit」

当ページのリンクには広告が含まれています。

jQuery Plugin » スクロール » スクロールしてもついてくる要素を指定「Sticky-kit」

スクロールしてもついてくる要素を指定できるjQueryプラグイン「Sticky-kit」を紹介します。

jQueryプラグイン「Sticky-kit」

jQueryプラグイン「Sticky-kit」は、スクロールしてもついてくる要素を簡単に作成することができるプラグインです。

デモとソースをご覧ください。ちょっと長いソースになってしましましたが、jQueryの部分はごくわずか簡単にスクロール要素が実現できます。

「Sticky-kit」のデモ

デモのソース（HTML + jQuery）

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="Sticky-kit のデモでーす。">
<title>Sticky-kit - jQuery Plugin Demo</title>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="jquery.sticky-kit.js"></script>
<script type="text/javascript">
$(document).ready(function() {
  return $("[data-sticky_column]").stick_in_parent({
    parent: "[data-sticky_parent]"
  });
});
</script>
<style>
body {
  background: #efefef;
}
.container {
  margin: 0 auto;
  width: 1000px;
  height: 3000px;
  background: #fff;
  overflow: hidden;
}
.main{
  margin: 10px;
  padding: 10px;
  float:left;
  width:420px;
  border: double 1px blue;
}
.sidebar1 {
  margin: 10px;
  float:left;
  width: 180px;
  background: eee;
}
.sidebar2 {
  margin: 10px;
  float:left;
  width: 310px;
}
.sidemenu {
  padding: 5px;
  margin-bottom: 10px;
  border: double 1px blue;
}
.sticky {
  padding: 5px;
  border: double 1px red;
}
</style>
</head>
<body>
<div class="container" data-sticky_parent>
<p><a href="https://webkaru.net/jquery-plugin/sticky-kit/">「jQueryプラグインまとめ」に戻る</a></p>
<h1>Sticky-Kitのデモでーす。</h1>
<div class="main">
<h2>メイン</h2>
<ul>
<li>秋の田のかりほの庵の苫をあらみ　わが衣手は露にぬれつつ</li>
<li>春過ぎて夏来にけらし白妙の　衣干すてふ天の香具山</li>
<li>あしびきの山鳥の尾のしだり尾の　ながながし夜をひとりかも寝む</li>
<li>田子の浦にうち出でて見れば白妙の　富士の高嶺に雪は降りつつ</li>
<li>奥山に紅葉踏み分け鳴く鹿の　声聞く時ぞ秋は悲しき</li>
<li>鵲の渡せる橋に置く霜の　白きを見れば夜ぞ更けにける</li>
<li>天の原ふりさけ見れば春日なる　三笠の山に出でし月かも</li>
<li>わが庵は都の辰巳しかぞ住む　世をうぢ山と人はいふなり</li>
<li>花の色は移りにけりないたづらに　わが身世にふるながめせしまに</li>
<li>これやこの行くも帰るも別れては　知るも知らぬもあふ坂の関</li>
<li>わたの原八十島かけて漕ぎ出でぬと　人には告げよ海人の釣船</li>
<li>天つ風雲の通ひ路吹きとぢよ　乙女の姿しばしとどめむ</li>
<li>筑波嶺の峰より落つるみなの川　恋ぞ積もりて淵となりぬる</li>
<li>陸奥のしのぶもぢずりたれゆえに　乱れそめにしわれならなくに</li>
<li>君がため春の野に出でて若菜摘む　わが衣手に雪は降りつつ</li>
<li>立ち別れいなばの山の峰に生ふる　まつとし聞かば今帰り来む</li>
<li>ちはやぶる神代も聞かず竜田川　からくれなゐに水くくるとは</li>
<li>住の江の岸に寄る波よるさへや　夢の通ひ路人目よくらむ</li>
<li>難波潟短き蘆のふしの間も　逢はでこの世を過ぐしてよとや</li>
<li>わびぬれば今はたおなじ難波なる　みをつくしても逢はむとぞ思ふ</li>
</div>
<div class="sidebar">
  <div class="sidebar1">
    <div class="sidemenu">
      <ul>
        <li>ついてこない１</li>
        <li>ついてこない２</li>
        <li>ついてこない３</li>
        <li>ついてこない４</li>
      </ul>
    </div>
    <div class="sticky" data-sticky_column>
      <ul>
        <li>ついてくる１</li>
        <li>ついてくる２</li>
        <li>ついてくる３</li>
        <li>ついてくる４</li>
      </ul>
    </div>
  </div>
  <div class="sidebar2">
    <div class="sticky" data-sticky_column>
      <iframe src="http://rcm-fe.amazon-adsystem.com/e/cm?t=karuma-22&o=9&p=12&l=ur1&category=kindle&banner=089E798HTQBYS18QB5G2&f=ifr" width="300" height="250" scrolling="no" border="0" marginwidth="0" style="border:none;" frameborder="0"></iframe>
    </div>
  </div>
</div>
 
</footer>
</body>
</html>

Sticky-kit

jQueryプラグイン「Sticky-kit」

デモのソース（HTML + jQuery）

関連記事（一部広告含む）