スクロールをすると、サイドにあるメニューがついてくるサイトを見かけることは多々あると思います。
そのようなプラグインもいっぱいありますが、
今回はプラグインを使わずに実装してみました。
html
|
1 2 3 4 5 6 7 8 9 10 | <div class="nav"> <p>メニュー</p> <ul> <li><a href="">» メニュー1</a></li> <li><a href="">» メニュー2</a></li> <li><a href="">» メニュー3</a></li> <li><a href="">» メニュー4</a></li> <li><a href="">» メニュー5</a></li> </ul> </div> |
いたって普通のHTMLです
css
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | .nav { width: 200px; float: left; top: 0; } .nav p { color: #FFF; background-color: #88BED1; padding: 10px; } .nav li { background-color: #eeeeee; margin-bottom: 1px; } .nav li a { display: block; width: 100%; padding: 10px 10px 10px 20px; color: #666; text-decoration: none; } .fixed { position: absolute; } |
javascript
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | $(function(){ var nav = $(".nav"); //navの位置 var navTop = nav.offset().top; //スクロールをするたびに実行 $(window).scroll(function () { var winTop = $(this).scrollTop(); nav.stop(); //これがないと連続して実行されたときに変な動きになります。 //スクロール位置がnavの位置より下だったらクラスfixedを追加 if (winTop >= navTop) { nav.addClass('fixed'); nav.animate({top: winTop + "px"}, "slow"); } else if (winTop <= navTop) { nav.removeClass('fixed'); } }); }); |
動きが理想としていたものとは違いますが、ひとまずこれで。。。
また挑戦したいと思います。
本当は、下記のサイトのような感じにしたかったのですが。。。
このサイトは、その部分以外も工夫されていて、
なによりスカイツリー全体をスクロールしながら見るというのがおもしろいですね～
実装するのに参考にさせていただいたのが下記のサイトです。
jQueryでスクロールすると上部に固定されるナビゲーション | webOpixel
(スクリプトほとんど流用させていただいています・・・すいません笑)
