.offset() hata konumu mutlak?

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 "iletişim ($ 1 öğedir), düğme $ (1 öğedir)" 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> 

Durum:

Ben bir simge .flyouticon sahip olan süpürdü veya hemen yanında gelmelidir .flyoutdialog iletişim kutusunu açmak gerekir tıklandığında. Bunu yapmak için, bu kodu kullanacağımı düşündüm. Bu kod çalışır, ancak aşağı kaydırmaz veya sağa değil (!!!!).

kaydırılan DEĞİL Ne zaman:

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 

mükemmel çalışma. Ancak, WHEN kaydırıldı:

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 küçüldü ... Kaydırdığımda neden bu oluyor?

Fix:

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

Soru:

neden offset() düzgün burada işe yaramadı? Firefox kullanıyorum ama sanırım önemli değil. (Düzenle: IE8'de aynıdır. Bu yüzden tarayıcı değildir) İletişim kutusu mutlak olarak konumlandırıldığında neden bireysel CSS özelliklerini kullanmak zorundayım? ve aşağı kaydırdığımda neden yukarı çıkıyor? 'TOP' neden daha küçük oluyor? ne zaman olması gerektiği ile ayarlamış olduğumda. Bu, offset() setterindeki bir hata mı?

Düzenleme: iyi

,

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

çalışıyor gibi görünüyor. Ama bu benim soruma cevap vermiyor NEDEN? Neden offset, scrollTop() değerini otomatik olarak top değerinden setter değerinden düşüyor? Bu mantıklı değil! Kaydırma sırasında beklediğiniz gibi

Answer 1

ofset çalışmayacaktır. $(window).scrollTop() için