ある程度までスクロールしたら固定されるナビゲーションと、ある程度までスクロールしたら表示されるフッター

ある程度までスクロールしたら固定されるナビゲーションと、ある程度までスクロールしたら表示されるフッターのスクリプトを考えました。
ナビゲーションの固定は最近楽天でも使用されています。フッターの処理は事例がすぐに思いつきませんが、ブログでよく使われているように思います。

スクロールさせてみてください。
DEMO

AD

ある程度の位置までスクロールしたら最上段に固定されるナビゲーション

スクロール位置を取得し、ある程度の位置まで来たらposition:fixedにします。IE6では当然効きませんが、ナビゲーションが固定されないだけなので実害はないと思います(IE6に対応する場合でも、スクロール位置を取得してtopの値とするだけなのでそれほど難しい処理ではありません)。

ある程度の位置までスクロールしたら出てくるフッター

フッターはある程度スクロールしたらぬるっと出てくるアニメーションを実行させています。逆に上方向へスクロールした場合、ぬるっと消えます。
基本的には前述のナビゲーションを固定する処理と同じなのですが、アニメーションが絡む場合は一度アニメーションを実行したらそれ以降は実行させないという処理が必要です。そうしないと閾値(ここでは1000px)でスクロールを上下するとどんどんキューが溜まっていき、フッターが出たり入ったりを繰り返すことになってしまいます。

ポイントは
$(this).stop(true,true).queue([]);
という部分で、アニメーション実行後にstop()によって連続で実行されないようにし、さらに空のキューを渡してアニメーションをそれ以上実行されないようにしています。

AD

Share

Commentsコメント

メールアドレスは公開されません。コメントは必ずご入力ください。

HTMLタグは使用できません。ソースコードを書き込みたい場合はCodetterGistCodePenなどのご利用が便利です。

コメントはまだありません。