ナビゲーションをスクロールの途中でヘッダーに固定する方法 * R4 * Webサービスレビューサイト
最初からヘッダーに固定するタイプではなく、スクロールしていく途中で、ヘッダーが固定される方法の紹介です。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 に固定したい
position: fixed;でサイドに固定してjQueryでスライドして現れるメニュー
では、設置方法を説明してみます。 固定されたスライドメニューの作成 まず、head内でjQueryを読み込みます。もちろんjQueryは自分のサーバーにアップしてもかまいません。 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> メニュー自体は簡単なリストメニューで構成されています。#のところはそれぞれリンク先のアドレスに変更してください。 <ul id="navi"> <li class="home"><a href="#"></a></li> <li class="rss"><a href="#"></a></li> <li class="facebook"><a href="#"></a></li> <li cla
スクロール途中から位置が固定されるナビゲーションを作ってみる
ある程度スクロールすると、途中から位置が固定になるコンテンツを見かけたことはありませんか？ 今回はjQueryを使ってそれを作ります。 デモ1 デモ2 途中から位置が固定されるナビゲーションのデモ 1 & 2 ダウンロード 今回使うHTMLはこんな感じです。 <div id="header"> <h1>タイトル</h1> </div> <div id="container"> <div id="main">左カラム（メインコンテンツ）</div> <div id="sidebar"><!-- サイドバー --> <div id="nav">ここを固定する</div> </div> </div>#mainと#sidebarはfloat: leftしています。 これの#navが表示エリア上部から20pxの位置まで来たら位置を固定したいと思います。 position: fixedを使って固定する
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
