.offset()位置绝对的bug？

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")的1项,按钮是1项$(".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()吗？

编辑:

好,

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

似乎工作.但这不能回答我的问题为什么？为什么偏移会自动scrollTop()从top设置器中的值中扣除值？这没有意义!

Answer 1

滚动时，偏移量不会按您预期的方式工作。你需要添加 $(window).scrollTop()到它