javascript - jQuery オフセット、要素を別の下に配置します。ここで、右の境界線が整列した要素に接触します

Question

わかりました。この件名は、私が対処しようとしている全体的なニーズに特に限定されているわけではありません。したがって、特定の要素で呼び出されるこの関数があります。これは、トリガー要素の横にある非表示のサブメニューです。ページのレンダリング方法とスタイルの最適化を維持するために、css を介して位置をスタイルすることはできません。したがって、javascript/jquerys のヘルプが必要です。

これで、必要に応じて再利用できる機能を思いつき、どこでも問題なく動作します。ただし、私の重要な問題は、サブメニューが<section>存在する要素の端にオーバーラップするいくつかのケースがあることです。その要素のオーバーフローは非表示に設定されており、ページの下部から約 30 ピクセルですとにかく。全体として、サブメニュー要素は、要素の途中でページビューから完全に外れるか、セクションタグのオーバーフロー状態によって隠されます。

それと。これが発生した場合、要素をトリガー要素の下部に配置する代わりに、上部に配置して、その場合のメニューがトリガー要素の下ではなく上になるようにしたいと考えています。

問題は、それを補う方法がわからないことです。

これが私が必要とすることをするために私が思いついた関数です。メニュー要素がページから落ちたとき、いわばキャッチするという意味で助けが必要です。

function openSubOrgMenu(triggerID, elem)
{
    orgSubOpenID = triggerID;
    orgSubShowing = true;

    elemOffset = elem.offset(); //trigger element
    elemWidth = elem.width();
    elemHeight = elem.height();

    elemWrap = elem.siblings('.org_group_wrapper');//menu element
    elemWrapWidth = elemWrap.width();
    elemWrapHeight = elemWrap.height();

    moveTop = elemHeight + elemOffset.top + 4;
    moveLeft = elemOffset.left - (elemWrapWidth-elemWidth-15);


    elemWrap.show().offset({top:moveTop, left:moveLeft});
}

ここにJS Fiddleがあります。必ずしも私が望むものの動作ロジックを示しているわけではありませんが、ページ/セクションの下部にある要素である場合の望ましい効果を示しています: http://jsfiddle.net/4zwEr/