最初からヘッダーに固定するタイプではなく、スクロールしていく途中で、ヘッダーが固定される方法の紹介です。ANTEPRIMAやIWCなど、多くのWebサイトで使われています。 <script src="jquery.js"></script> <script> $(function(){ hTop = $('#header').offset().top; }); $(window).scroll(function () { if($(window).scrollTop() > hTop - 0) { $('#header').css('position', 'fixed'); $('#header').css('top', '0px'); }else{ $('#header').css('position', 'static'); } }); </script> #header に固定したい
![ナビゲーションをスクロールの途中でヘッダーに固定する方法 * R4 * Webサービスレビューサイト](https://cdn-ak-scissors.b.st-hatena.com/image/square/0c0637256411e86c0c98c78397e53394da0eefd9/height=288;version=1;width=512/http%3A%2F%2Freview4.cc%2Fwp-content%2Fuploads%2F2012%2F08%2Fiwc.jpg)