List Title 1
One
Two
Three
Four
Five
Six
Seven
List Title 2
One
Two
List Title 3
One
Two
Three
Four
Five
Six
Seven
Eight
Nine
Ten
Eleven
Twelve
Thirteen
Fourteen
Fifteen
Sixteen
List Title 4
One
List Title 5
One
Two
Three
Four
List Title 6
One
Two
Three
Four
Five
Six
Seven
List Title 7
One
Two
Three
Four
Five
Six
Seven
Eight
Nine
Ten
Eleven
Twelve
Thirteen
Fourteen
Fifteen
Sixteen
Seventeen
Eighteen
Nineteen
Twenty
List Title 8
One
Two
Three
Four
Five
Six
Seven
Eight
Nine
Ten
List Title 9
One
List Title 10
One
Two
Three
Four
Five
Six
Seven
Eight
Nine

このプラグインの実際の動きを確認したい場合は、PCからアクセスして下さい。

  • files
  • js
  • html
<script src="<PATH>/jquery.min.js"></script>
<script src="<PATH>/jquery.list.min.js"></script>
<script>
	$(window).load(function(){
		$('#ListDemo').list();
	});
</script>
<dl id="ListDemo">
	<dt>List Title 1</dt>
	<dd>One</dd>
	<dd>Two</dd>
	<dd>Three</dd>
	<dd>Four</dd>
	<dd>Five</dd>
	<dd>Six</dd>
	<dd>Seven</dd>
	<dt>List Title 2</dt>
	<dd>One</dd>
	<dd>Two</dd>
	<dt>List Title 3</dt>
	<dd>One</dd>
	<dd>Two</dd>
	<dd>Three</dd>
	<dd>Four</dd>
	<dd>Five</dd>
	<dd>Six</dd>
	<dd>Seven</dd>
	<dd>Eight</dd>
	<dd>Nine</dd>
	<dd>Ten</dd>
	<dd>Eleven</dd>
	<dd>Twelve</dd>
	<dd>Thirteen</dd>
	<dd>Fourteen</dd>
	<dd>Fifteen</dd>
	<dd>Sixteen</dd>
	<dt>List Title 4</dt>
	<dd>One</dd>
	<dt>List Title 5</dt>
	<dd>One</dd>
	<dd>Two</dd>
	<dd>Three</dd>
	<dd>Four</dd>
	<dt>List Title 6</dt>
	<dd>One</dd>
	<dd>Two</dd>
	<dd>Three</dd>
	<dd>Four</dd>
	<dd>Five</dd>
	<dd>Six</dd>
	<dd>Seven</dd>
	<dt>List Title 7</dt>
	<dd>One</dd>
	<dd>Two</dd>
	<dd>Three</dd>
	<dd>Four</dd>
	<dd>Five</dd>
	<dd>Six</dd>
	<dd>Seven</dd>
	<dd>Eight</dd>
	<dd>Nine</dd>
	<dd>Ten</dd>
	<dd>Eleven</dd>
	<dd>Twelve</dd>
	<dd>Thirteen</dd>
	<dd>Fourteen</dd>
	<dd>Fifteen</dd>
	<dd>Sixteen</dd>
	<dd>Seventeen</dd>
	<dd>Eighteen</dd>
	<dd>Nineteen</dd>
	<dd>Twenty</dd>
	<dt>List Title 8</dt>
	<dd>One</dd>
	<dd>Two</dd>
	<dd>Three</dd>
	<dd>Four</dd>
	<dd>Five</dd>
	<dd>Six</dd>
	<dd>Seven</dd>
	<dd>Eight</dd>
	<dd>Nine</dd>
	<dd>Ten</dd>
	<dt>List Title 9</dt>
	<dd>One</dd>
	<dt>List Title 10</dt>
	<dd>One</dd>
	<dd>Two</dd>
	<dd>Three</dd>
	<dd>Four</dd>
	<dd>Five</dd>
	<dd>Six</dd>
	<dd>Seven</dd>
	<dd>Eight</dd>
	<dd>Nine</dd>
</dl>

Listについて

Listは、スクロールしても見出し部分を固定したまま表示できるプラグインです。
縦方向が狭いスマホなどではユーザビリティーの向上が期待できます。
ダウンロード こちら
ドキュメント こちら
デモ こちら
ライセンスMIT
対応ブラウザ

関連するjQueryプラグイン

  • OverScroll

    OverScroll

    PCブラウザ上でスマホのスワイプ機能を実現できる

  • slideToucher

    slideToucher

    上下左右方向へのスワイプ、スライドを実装できる

  • ContainedStickyScroll

    ContainedStickyScroll

    スクロールしてもどこまでもついてくるあの子

  • TiltedPage

    TiltedPage

    TiltedPageは、3Dで奥行き感のあるスクロールを表現できる

  • scrollUp

    scrollUp

    ページを一定量スクロールすると、ページトップへ戻るボタンを表示