ページコンテンツを一番下までスクロールしたときに表示されるナビゲーションバーを表示したいと思います。
IEを含む互換性があるように、jQueryの実装に使用します。
このようなナビゲーションは、Webデザインのかなり一般的な要素です。 多くの場合、多くのWebサイトで見つけることができます。
リンクの水平リストのコンテナとしてHTML5 nav要素を使用します。
ステップ1
ナビゲーションコンテナ
私はすでにHTML5に精通しています。 この例では、2つの::と。を使用します。 次のマークアップから始めます。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <link rel="stylesheet" href="styles.css" /> <!-- . --> </head> <body> <nav id="hide">”<!— . --> <ul> <li><a href="#link-1" class="selected"></a></li> <li><a href="#link-2"> I</a></li> <li><a href="#link-3"> II</a></li> <li><a href="#link-4"> III</a></li> <li><a href="#top" id="go-top">⇑ ⇑</a> </li> </ul> </nav> <div class=wrapper> <h1> .</h1> <section id=" link-1"> ...</section> </div> </body> </html>
ステップ2
私たちはまともな見解をもたらします 。
id =” hide”のstyle.cssで位置を設定：固定; そして、他のすべてはあなたの味と色のためだけにあります。
#hide { width:100%; height:40px; padding: 20px 0; position: fixed; top: 0px; margin:0px; background-color:#287455; text-align:center; opacity:0.9; filter:alpha(opacity=90); -moz-opacity:0.9; } #hide li a { text-decoration: none; font-size: 20px; color: #000; font-weight: bold; display: inline-block; width: 120px; text-align: center; padding: .80px 16px; } nav li a:hover, nav li a.selected { color: #000; z-index:5; background: #40bfe8; }
ステップ3
JQueryコード
以下はJavaScriptコードです。 #hide要素を非表示にします。 次に、上部のscrollTopスクロールバーの位置の値を確認し、100より大きい場合は#hide要素を表示し、そうでない場合は非表示にします。 コードの次の部分は、「上へ」ボタンをクリックしたイベントを処理する機能です-＃go-top。 ボタンをクリックすると、bodyタグのscrollTop値が0に設定されます。
<script src="jquery-1.6.4.min.js" type="text/javascript"></script> <script> $(document).ready(function(){ $("#hide").hide(); $(function () { $(window).scroll(function () { if ($(this).scrollTop() > 100) { $('#hide').fadeIn(); } else { $('#hide').fadeOut(); } }); $('#go-top').click(function () { $('body,html').animate({ scrollTop: 0 }, 800); return false; }); }); }); </script>
ここに私のソースがあります
デモ