- WordPress
- 2012
- 10/01
ある程度までスクロールしたら固定されるナビゲーションと、ある程度までスクロールしたら表示されるフッター
ある程度までスクロールしたら固定されるナビゲーションと、ある程度までスクロールしたら表示されるフッターのスクリプトを考えました。
ナビゲーションの固定は最近楽天でも使用されています。フッターの処理は事例がすぐに思いつきませんが、ブログでよく使われているように思います。
ナビゲーションの固定は最近楽天でも使用されています。フッターの処理は事例がすぐに思いつきませんが、ブログでよく使われているように思います。
スクロールさせてみてください。
DEMO
DEMO
ADs
ある程度の位置までスクロールしたら最上段に固定されるナビゲーション
スクロール位置を取得し、ある程度の位置まで来たらposition:fixedにします。IE6では当然効きませんが、ナビゲーションが固定されないだけなので実害はないと思います（IE6に対応する場合でも、スクロール位置を取得してtopの値とするだけなのでそれほど難しい処理ではありません）。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
(function($){ $(function(){ //ついてくるナビゲーション $(window).on('scroll',function(){ var obj = new Object(); obj.y = document.documentElement.scrollTop || document.body.scrollTop; //スクロール位置取得 if(obj.y > 250){ //上から250pxまでスクロールしたらナビを固定する $('nav').css({ position: 'fixed', top: 0, left: 0 }); } else { //250px以内ならfixedを削除 $('nav').removeAttr('style'); } }); }); })(jQuery); |
ある程度の位置までスクロールしたら出てくるフッター
フッターはある程度スクロールしたらぬるっと出てくるアニメーションを実行させています。逆に上方向へスクロールした場合、ぬるっと消えます。
基本的には前述のナビゲーションを固定する処理と同じなのですが、アニメーションが絡む場合は一度アニメーションを実行したらそれ以降は実行させないという処理が必要です。そうしないと閾値（ここでは1000px）でスクロールを上下するとどんどんキューが溜まっていき、フッターが出たり入ったりを繰り返すことになってしまいます。
ポイントは
$(this).stop(true,true).queue([]);
という部分で、アニメーション実行後にstop()によって連続で実行されないようにし、さらに空のキューを渡してアニメーションをそれ以上実行されないようにしています。
|
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 |
(function($){ $(function(){ //ぬるっとしたフッター $(window).on('scroll',function(){ var obj = new Object(); obj.y = document.documentElement.scrollTop || document.body.scrollTop; if(obj.y > 1000){ //1000pxスクロールしたらbottom:0pxの位置にアニメーション $('footer').animate({ bottom: '0px' },'slow',function(){ $(this).stop(true,true).queue([]); }); } else { $('footer').animate({ //1000px以内なら下方向へ80pxアニメーション（つまり画面外に動かす） bottom: '-80px' },'slow',function(){ $(this).stop(true,true).queue([]); }); } }); }); })(jQuery); |
ADs
Related Articles関連記事
- WordPress
- WordPress
- Webサービス
- WordPress
- ツール/エディタ
- ツール/エディタ
- Bootstrap
Comments
コメントはまだありません。