SOFTELメモ Developer's blog

会社概要 ブログ 調査依頼 採用情報 ...
技術者募集中

スクロールについてくるフローティングメニュー

問題

サイドメニューなどで、スクロールについてきて一緒に移動するメニューを作りたい。

解答例

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; で固定されてて、サイドメニューが上端まで移動すると隠れてしまう場合など。

デモはこちら

スクロールについてくるフローティングメニュー – デモ

関連するメモ

コメント(9)

yama 2012年11月1日 10:26

はじめまして。
フローティングメニューの実装で、あれこれ付け加えなくても良いものを探していたら、こちらのサイトに辿り着き、早速試させていただきました。
スクロールに合わせてメニューがついてくるところまでは良かったのですが、一番下までスクロールさせると、フッターで止まらず、さらにはフッターも一緒に下へ下へと下がってしまい困っております。
javascriptやjQueryにさほど詳しくないため、何を書き換えて良いかもわからず困っております。
この内容で原因や解決策がわかるようでしたら教えていただけませんでしょうか。
長々すみません。

yoshimura 2012年11月2日 17:26

画面に対してメニューの高さが大きいとそうなりそうな気がします。
このスクリプトは、単純にスクロールされたら、それに伴って margin-top を大きくしていって、表示位置を下にずらしていく作戦を取っています。
スクロールされたとき、表示位置を下にずらした結果、下にはみ出て、さらに下にスクロール可能となり(以下繰り返し)となると思います。

デモの場合でも、画面の高さを5cmぐらいに狭くすると、いつまでも下にスクロールできるようになります。

margin-topをどこまで大きくしてよいか上限を計算して、それを超えないようにするとか、
margin-topを使わないでpositionとtopを使って対応するとか、
#sidebarの親要素内だけで移動するようにするとか、
考えられますが、やりやすい方法はHTMLにもよると思います。

汎用的にしようとすると、手軽さがなくなってしまいますし。。。
また別な作戦のフローティングメニューも作ってみます。

JM 2013年7月1日 09:46

はじめまして。
こちらのフローティングメニューを使わせて頂いていますが、
メニューが遅れて着いてくるアニメーションを使わず、
一定の位置に固定したままにするにはどうしたら良いでしょうか?
よろしくお願い致します。

yoshimura 2013年7月1日 09:48

position:fixed したら、固定になると思います。

JM 2013年7月1日 09:57

早速のご返信、ありがとうございました。
やってみます。

kate 2013年8月24日 00:12

はじめまして。

汎用性のあるフローティングを探し、こちらにたどり着きました。

突然の質問で申し訳ないのですが、スクロールしてメニューがついてくるスピードは調整可能ですか?

yoshimura 2013年8月24日 07:43

jqueryのanimateを使っているので、スピードではなくて、時間ならば簡単に調整できると思います。
第2引数に何秒かけてアニメーションするか指定できます。
http://api.jquery.com/animate/

kate 2013年8月25日 12:40

突然のご質問にも関わらず、さっそくお答えいただきありがとうございました!

yajio 2014年11月4日 23:28

yamaさんの「一番下までスクロールさせると、フッターで止まらず」の件、私も同じ状況だったのです。
HTMLにサイドメニューだけを配置し、レビューすると一番下までスクロールされず、ちょっと上にビヨーンと戻ってしまう。

しかし、そのメニューを左(右でもかな?)にフロートさせ、
コンテンツと2カラムにしたらちゃんとできるようになりました。

お門違いな回答でしたらすみません。私はこれで解決したもので。