スクロールについてくるフローティングメニュー
Category JavaScript
2011/11/06
問題
サイドメニューなどで、スクロールについてきて一緒に移動するメニューを作りたい。
解答例
jQueryが使える状況なら、こんなのでどうでしょう。
・Javascript
$(function(){
var o = $("#sidebar");
var offset = o.offset();
var topPadding = 30;
$(window).scroll(function() {
if ($(window).scrollTop() > offset.top) {
o.stop().animate({
marginTop: $(window).scrollTop() - offset.top + topPadding
});
} else {
o.stop().animate({
marginTop: 0
});
};
});
});
・HTML
<div id="sidebar">
（サイドメニューのHTML）
</div>
topPadding = 30 のところは、デザインに応じて調整。例えば、ヘッダーが position:fixed; で固定されてて、サイドメニューが上端まで移動すると隠れてしまう場合など。
はじめまして。
フローティングメニューの実装で、あれこれ付け加えなくても良いものを探していたら、こちらのサイトに辿り着き、早速試させていただきました。
スクロールに合わせてメニューがついてくるところまでは良かったのですが、一番下までスクロールさせると、フッターで止まらず、さらにはフッターも一緒に下へ下へと下がってしまい困っております。
javascriptやjQueryにさほど詳しくないため、何を書き換えて良いかもわからず困っております。
この内容で原因や解決策がわかるようでしたら教えていただけませんでしょうか。
長々すみません。
画面に対してメニューの高さが大きいとそうなりそうな気がします。
このスクリプトは、単純にスクロールされたら、それに伴って margin-top を大きくしていって、表示位置を下にずらしていく作戦を取っています。
スクロールされたとき、表示位置を下にずらした結果、下にはみ出て、さらに下にスクロール可能となり（以下繰り返し）となると思います。
デモの場合でも、画面の高さを5cmぐらいに狭くすると、いつまでも下にスクロールできるようになります。
margin-topをどこまで大きくしてよいか上限を計算して、それを超えないようにするとか、
margin-topを使わないでpositionとtopを使って対応するとか、
#sidebarの親要素内だけで移動するようにするとか、
考えられますが、やりやすい方法はHTMLにもよると思います。
汎用的にしようとすると、手軽さがなくなってしまいますし。。。
また別な作戦のフローティングメニューも作ってみます。
はじめまして。
こちらのフローティングメニューを使わせて頂いていますが、
メニューが遅れて着いてくるアニメーションを使わず、
一定の位置に固定したままにするにはどうしたら良いでしょうか？
よろしくお願い致します。
position:fixed したら、固定になると思います。
早速のご返信、ありがとうございました。
やってみます。
はじめまして。
汎用性のあるフローティングを探し、こちらにたどり着きました。
突然の質問で申し訳ないのですが、スクロールしてメニューがついてくるスピードは調整可能ですか？
jqueryのanimateを使っているので、スピードではなくて、時間ならば簡単に調整できると思います。
第2引数に何秒かけてアニメーションするか指定できます。
http://api.jquery.com/animate/
突然のご質問にも関わらず、さっそくお答えいただきありがとうございました！
yamaさんの「一番下までスクロールさせると、フッターで止まらず」の件、私も同じ状況だったのです。
HTMLにサイドメニューだけを配置し、レビューすると一番下までスクロールされず、ちょっと上にビヨーンと戻ってしまう。
しかし、そのメニューを左（右でもかな？）にフロートさせ、
コンテンツと２カラムにしたらちゃんとできるようになりました。
お門違いな回答でしたらすみません。私はこれで解決したもので。