3

ページの静的要素内にホバリング ボタンを配置するために、2 つの JavaScript メソッドを使用しています。中央に配置されたボタンは、最初の要素内に入力され、絶対位置を使用します。親要素の測定値を取得するために使用しているコード:

// calculate if the element is in the visible window
function elementVisibleRect(element) {
    element = $(element);
    var rect = {
        top: Math.round(element.offset().top),
        left: Math.round(element.offset().left),
        width: Math.round(element.outerWidth()),
        height: Math.round(element.outerHeight())
    };
    var scrollTop = $(window).scrollTop();
    var windowHeight = $(window).height();
    var scrollBottom = scrollTop + windowHeight;
    var elementBottom = Math.round(rect.height + rect.top);

    if (scrollTop < rect.top && scrollBottom > elementBottom) {
        return rect;
    }
    if (scrollTop > rect.top) {
        rect.top = scrollTop;
    }
    if (scrollBottom < elementBottom) {
        rect.height = scrollBottom - rect.top;
    } else {
        rect.height = windowHeight - (scrollBottom - elementBottom);
    }
    return rect;
}

この情報を使用し、ボタンを中央に配置するため

// center the element based on visible screen-frame
function elementPosition (element) {
    var visibleRect = elementVisibleRect(element);
    $('.editHoverButton').css({
        top: visibleRect.top + ((visibleRect.height / 2) - ($('.editHoverButton').outerHeight() / 2)),
        left: visibleRect.left + (visibleRect.width / 2) - ($('.editHoverButton').outerWidth() / 2)
    });
}

今私の問題は、サードパーティのライブラリが親DIVの位置をブラウザのデフォルトの「静的」から「相対」に変更する必要があることです。これにより、2番目の関数で計算が中断されます。

遅いかもしれませんが、何を試しても、親要素の位置が相対的に設定されている場合にこれを機能させる方法がわかりません。計算がうまくできていないようで、頭が痛くなり始めています。助言がありますか？

編集 - JSFIDDLE を追加

http://jsfiddle.net/RhTY6/

4

2 に答える 2

3

位置指定のある要素はabsolute、自然な流れから取り除かれ (たとえば、元の場所にスペースを残さない) 、位置指定なしの最初の親に対して相対的に配置されstaticます。右側のボックスの位置はrelative(ではなく) なので、とstaticでボタンを配置できます。これにより、左上隅が親の中心になります。次に、 andを使用して、要素の高さと幅の半分を位置から差し引くだけです。以下に示すように、これはあなたがしていたことよりもはるかに簡単です。top: 50%;left: 50%;margin-topmargin-left

JavaScript:

function elementPosition() {
    $('.editHoverButton').css('margin-top', 0 - $('.editHoverButton').outerHeight() / 2);
    $('.editHoverButton').css('margin-left', 0 - $('.editHoverButton').outerWidth() / 2);
};

CSS:

.editHoverButton {
  position: absolute;
  z-index: 99;
  font-family: sans-serif;
  font-size: 14px;
  font-weight: normal;
  background-color: #00bb00;
  top: 50%;
  left: 50%;
}

this関数から削除する以外は何も変更する必要はありませんelementPosition()。

DEMO(左のものはもう機能しないことに注意してください。これは、配置されているためですstatic。)

編集 - 同じ基本的な考え方を使用すると、この方法は機能するはずです。

問題は、定義時に要素の上と左の位置を取得したことrectです。位置計算について。それらを（最良の方法ではありませんが、機能します）に変更すると、要素0の問題が修正されます。relative

DEMO(左のものは機能することに注意してください。これは、とにかく 0,0 に配置されているためです。)

編集--これは、ページがスクロールするときに機能します。

これにより、コンテナが変数に設定され、ページがスクロールしたときに自動的に再配置できるようになります。

DEMO

于 2013-11-01T00:57:17.950 に答える