YUI-Panel und Scrollen

Question

Ich habe einen ziehbar YUI-Panel wie diese

definiert

new YAHOO.widget.Panel("parameters", { 
         fixedcenter: true, 
         constraintoviewport: true, 
         underlay: "shadow", 
         visible: false, 
         close: true, 
         draggable: true, 
         width: "350px" }); 

Wenn die Platte gezeigt wird, ich will es immer sichtbar bleiben, auch wenn das Fenster gescrollt wird. Dies ist auch der Fall, dank fixedcenter: true. Das Problem ist, dass sich das Fenster beim Scrollen des Fensters in der Mitte des Fensters positioniert, auch wenn es zuvor irgendwo anders hingezogen wurde.

Wie soll ich die obige Definition ändern, damit die Position des Panels relativ zum Fenster beim Scrollen des Fensters konstant bleibt?

Answer 1

Wickeln Sie Ihren Panel-Container in ein Wrapper-Element, das fest positioniert ist, z.

<div id="wrapper" style="position: fixed"> 
    <div id="parameters"> 
     <div class="hd">Header</div> 
     <div class="bd">Hello, this is my awesome panel.</div> 
     <div class="ft">Footer</div> 
    </div> 
</div> 

Konstruieren Sie Ihr Panel ohne fixedcenter Konfigurationseigenschaft, und in der Mitte der Platte unmittelbar nachdem Sie es machen, z.B.

var panel = new YAHOO.widget.Panel("parameters", { 
     constraintoviewport: true, 
     underlay: "shadow", 
     visible: false, 
     close: true, 
     draggable: true, 
     width: "350px" 
    }); 
panel.render(); 
panel.center(); 

Das Panel sollte jetzt in der gleichen Position bleiben, wenn das Fenster gescrollt wird. Ich habe das nur in Firefox 3.0 und Internet Explorer 7 und 8 getestet.

Ich habe posted the source von einem in sich geschlossenen Beispiel, das dies funktioniert zu demonstrieren.

Answer 2

Gemäß der Dokumentation, stellen Sie die fixedcenter an:

"enthalten" feste Mittelpunkt Positionierung zu ermöglichen, wie mit der wahren Option. Wenn die Eigenschaft auf "contained" gesetzt ist und die Überlagerung für das Ansichtsfenster zu groß ist, wird sie jedoch nicht automatisch zentriert, wenn der Benutzer scrollt oder die Größe des Fensters ändert (bis zum Fenster) ist groß genug, um die Überlagerung zu enthalten). Dies ist nützlich in Fällen, in denen das Overlay sowohl Header als auch Fußzeilen-UI-Steuerelemente enthält, auf die der Benutzer möglicherweise zugreifen muss.

http://developer.yahoo.com/yui/docs/YAHOO.widget.Overlay.html