ITエンジニア/デザイナ向けにオープンソースを毎日紹介

覚えておくと使い道が多そうですよ。

最近のWebサイトではページの上部にメニューが常時貼り付いたデザインが多くなっています。しかしこれも好きずきで、常に表示されてしまうことに対して違和感を感じる人も少なくありません。

そこで使ってみて欲しいのがスクロールした後で上部に貼り付くようにしてくれるライブラリstickUpです。jQueryプラグインなのでとても簡単に使えます。

使い方はシンプルで、stickUpを読み込んだ後、貼り付かせたいDOMを指定してstickUpを実行するだけです。例えば下のような感じです。

<script src="js/stickUp.min.js"></script>
<script type="text/javascript">
  //initiating jQuery
  jQuery(function($) {
    $(document).ready( function() {
    //enabling stickUp on the '.navbar-wrapper' class
      $('.navbar-wrapper').stickUp();
    });
  });
</script>

そして実例として以下のようなWebサイトがあります。

最初はこのようになっていて、メニューはページの下の方にあります。
最初はこのようになっていて、メニューはページの下の方にあります。

スクロールすると上部にスナップされました。
スクロールすると上部にスナップされました。

スクロールするのに合わせてメニューのハイライト部分が変わっていきます。
スクロールするのに合わせてメニューのハイライト部分が変わっていきます。

stickUpはメニューなのでクリックすればページのアンカーでも別URLへも飛べます。Bootstrapとの親和性が特に高いようですが、特に限定せず任意のWebサイトで利用できるでしょう。

他にもワンページのWebサイトでの利用法やWordPressと組み合わせる使い方も紹介されていますので、幅広く活用できるのではないでしょうか。

stickUpはjQuery/JavaScript製、LGPLのオープンソース・ソフトウェアです。

stickUp - a free jQuery Plugin

LiranCohen/stickUp

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2