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()

.offset（）位置绝对的bug？

1 个答案: