jquery - .offset() 绝对位置错误？

Question

CSS:

.flyoutdialog
{
    position: absolute;
    top:0;
    left:0;
    border: 1px solid #CCC;
    background-color: white;
    width: 250px;
    padding: 10px 10px 10px 10px;
}

jQuery:(对话框是 $(".flyoutdialog") 的一项，按钮是 $(".flyouticon") 的一项)

    var offset = button.offset();
    alert("top: " + offset.top + " left: " + offset.left);
    // dialog.offset({ top: offset.top - 5, left: offset.left + 25 });
    dialog.css("top", offset.top - 5 + "px");
    dialog.css("left", offset.left + 25 + "px");

    dialog.show("blind", { direction: "horizontal" }, 1000);

    var off2 = dialog.offset();
    alert("top: " + off2.top + " left: " + off2.left);

HTML:

<div class="editor-label">
        <label for="Gebruikerscode">Gebruikerscode</label>
    </div>
    <div class="editor-field">
        <input id="gebruikerscode" name="gebruikerscode" type="text" value="" />
<a href="#" class="flyouticon">
    <img src="/img/help.png" alt="Flyout" width="16" /></a>

<div class="flyoutdialog grayicon" title="Gebruikerscode">
    <div class="title">
        <h4>
            Gebruikerscode</h4>
        <span class="closedialog ui-icon ui-icon-closethick">&nbsp;</span>
    </div>
    <p>
        Dit is de code of 'gebruikersnaam' waarmee de school inlogt. Deze is uniek.</p>

</div>

</div>

情况:

我有一个图标 .flyouticon，当悬停或单击它时应该打开 .flyoutdialog对话框应该就在它旁边。为此，我想我会使用这段代码。此代码有效，但仅当我不向下或向右滚动时(!!!!)。

不滚动时:

    var offset = button.offset();
    alert("top: " + offset.top + " left: " + offset.left); //top: 375 left: 288.29998779296875
    dialog.offset({ top: offset.top - 5, left: offset.left + 25 });
    dialog.show("blind", { direction: "horizontal" }, 1000);
    var off2 = dialog.offset();
    alert("top: " + off2.top + " left: " + off2.left); //top: 370 left: 313.29998779296875

工作完美。但是，当滚动时:

    var offset = button.offset();
    alert("top: " + offset.top + " left: " + offset.left); //top: 375 left: 288.29998779296875
    dialog.offset({ top: offset.top - 5, left: offset.left + 25 });
    dialog.show("blind", { direction: "horizontal" }, 1000);
    var off2 = dialog.offset();
    alert("top: " + off2.top + " left: " + off2.left); //**top: 142** left: 313.29998779296875

TOP 变小了...为什么我滚动时会发生这种情况？？

修复:

    var offset = button.offset();
    alert("top: " + offset.top + " left: " + offset.left);
    //dialog.offset({ top: offset.top - 5, left: offset.left + 25 });

    dialog.css("top", offset.top - 5 + "px");
    dialog.css("left", offset.left + 25 + "px");

    dialog.show("blind", { direction: "horizontal" }, 1000);
    var off2 = dialog.offset();
    alert("top: " + off2.top + " left: " + off2.left);

问题:

为什么 offset() 在这里不能正常工作？我正在使用 Firefox，但我想这无关紧要。 (编辑:在 IE8 中相同。所以它不是浏览器)为什么当对话框绝对定位时我必须使用单独的 CSS 属性？为什么向下滚动时它会上升？为什么'TOP'变小了？？当我刚刚将它设置为应该的值时。这是 offset() 的 setter 中的错误吗？

编辑:

嗯，

    dialog.offset({ top: offset.top + $(window).scrollTop() - 5, left: offset.left + 25 });

似乎有效。但这并没有回答我的问题 WHY? 为什么偏移量会自动从 setter 中的 top 值中扣除 scrollTop() 值？这没有意义!

Answer 1

offset 在滚动时不会像您预期的那样工作。你需要添加 $(window).scrollTop() 到它