jQuery｜エレベーターメニューにおいて

質問

こんにちは、
画面スクロールに対して要素が後追いする、いわゆるエレベーターメニューにおいて、その要素がウィンドウ高よりも大きいと、ひたすらに画面下部を掘り進んでしまいます・・といってもわからないと思うので、お手数ですが、下記URLをご参照頂けますでしょうか。

http://www.geocities.jp/fumiefumifumi/menu.html

ウィンドウ高を縮めた後、ページ下部までスクロールすると、わかって頂けると思います。cssにてメニュー(#navBox)にposition:absoluteをかけ、以下のスクリプトで動かしています。わからないなりにいろいろいじくってみたのですが、不具合を解決することができませんでした。

var name = "#navBox";
var menuYloc = null;
$(function(){
menuYloc = parseInt($(name).css("top").substring(0,$(name).css("top").indexOf("px")))
$(window).scroll(function () {
offset = menuYloc+$(document).scrollTop()+"px";
$(name).animate({top:offset},{duration:700,queue:false});
});

右側メインのボックス下部とメニューボックスの下部が揃う状態、もしくはposition:fixedと同じ状態になるのが理想です。
不具合を解消する方法をご存じの方、いらっしゃいましたら、どうかよろしくお願いします。

回答No.1

fujillin · ベストアンサー

試していませんが…

大雑把な考え方として、一旦メニューのtop座標を算出しておいて、
　top + メニューの高さ > bodyの高さ
だったら、topを
　 bodyの高さ - メニューの高さ
に修正してあげるようにすればよさそうに思えますが、いかがでしょうか？

お礼

ご回答ありがとうございます。
おかげさまで解決することができました、ありがとうございます！