【JavaScript】ウェブサイト上の要素を固定させるSticky-js

Sticky-jsは軽量の簡単にあなたのウェブサイト上に要素を固定させる設定をすることができます。

JS

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

要素

<div class="selector">Sticky element</div>

javascript

var sticky = new Sticky('.selector');

CommonJS

var Sticky = require('sticky-js');
var sticky = new Sticky('.selector');

Examples

<div class="row" data-sticky-container>
<div class="medium-2 columns">
<img src="http://placehold.it/250x250" class="sticky" data-margin-top="20">
</div>
<div class="medium-8 columns">
<h1>Sticky-js</h1>
<p>Lorem ipsum.....</p>
</div>
<div class="medium-2 columns">
<img src="http://placehold.it/250x250" class="sticky" data-margin-top="20">
</div>
</div>
<script src="sticky.min.js"></script>
<script>
var sticky = new Sticky('.sticky');
</script>

Methods

var sticky = new Sticky('.sticky');
sticky.update();
Option Description
data-margin-top ページと固定される要素のスクロール間のマージン

ブラウザ

  1. IE 9+
  2. Chrome 23+
  3. Firefox 21+
  4. Safari 6+
  5. Opera 15+

MITライセンス

 
Sticky-js

【JavaScript】ウェブサイト上の要素を固定させるSticky-js

  • LATEST
  • RELATED
  • POPULAR