jQueryでスクロール時にヘッダバーをスライド表示する
投稿日:2013年10月16日
更新日:2013年10月21日
初期状態ではヘッダバーは表示されず
ある程度下にスクロールした時にメニューや検索ボックスのヘッダバーを表示する方法です。
手段はいくつかありますが、
今回はメニュー等はあらかじめ画面外に表示しておいて
スクロールした時に画面内に移動する方法を行います。
最初にGoogle提供のjsを読み込みます。
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
HTMLは検索ボックスのあるヘッダバーと
スクロール用の縦長DIVのみです。
<div id="head_bar"> <input type="text"><button>検索</button> </div> <div style="height:3000px;"> </div>
スタイルでヘッダバーを隠しておきます。
<style type="text/css"> #head_bar{ width: 100%; height:50px; background-color:#333; position: fixed; top: -50px; padding-left:20px; line-height:50px; } </style>
ウインドウのスクロールをトリガーにヘッダバーの位置を変更します。
<script type="text/javascript"> $(function(){ var bar = $("#head_bar"); $(window).scroll(function () { if($(window).scrollTop() >= 200) { if(!bar.is(':animated')){ bar.animate({ 'top': '0px' },200); } } else { bar.animate({ 'top': '-50px' },50); } }); }); </script>
ウインドウのスクロールが200pxを超えたら
ヘッダーバーのtopを0pxにします。
いきなり表示されるのも不自然なので
アニメーションを使い、上からスライドしてくるようにします。
下方にスクロール中に何度もアニメーションイベントが発生してしまうので
if(!bar.is(':animated')){でアニメーション中は実行されないようにします。
サンプルページ
最近のコメント