Pergunta
Eu tenho um painel YUI draggable definido como este
new YAHOO.widget.Panel("parameters", {
fixedcenter: true,
constraintoviewport: true,
underlay: "shadow",
visible: false,
close: true,
draggable: true,
width: "350px" });
Quando o painel é mostrado, eu quero que ele permaneça sempre visível, mesmo quando a janela é rolada.
Este também é o caso, graças a fixedcenter: true
. O problema é que quando a janela é rolada as posições do painel-se ao centro da janela mesmo se ele foi arrastado para outro lugar anteriormente.
Como devo modificar a definição acima de modo que a posição do painel permanece constante em relação à janela quando a janela é rolada?
Solução
Envolva seu recipiente painel em um elemento de invólucro que fixou posicionamento, por exemplo.
<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>
construir o seu painel sem a propriedade de configuração fixedcenter
e centralizar o painel imediatamente depois de torná-lo, por exemplo.
var panel = new YAHOO.widget.Panel("parameters", {
constraintoviewport: true,
underlay: "shadow",
visible: false,
close: true,
draggable: true,
width: "350px"
});
panel.render();
panel.center();
O painel agora deve ficar na mesma posição quando a janela é rolada. Eu só testei isso no Firefox 3.0 e Internet Explorer 7 e 8.
postou o fonte de um exemplo independente que irá demonstrar este trabalho.
Outras dicas
De acordo com a documentação, definir o fixedcenter a:
"contida" Para permitir o posicionamento centro fixo, como acontece com o verdadeiro opção. No entanto, ao contrário de definir a propriedade como true, quando o propriedade é definida como "contida", se a sobreposição é demasiado grande para o viewport, ele não vai ficar automaticamente centrado quando o usuário rola ou altera o tamanho da janela (até que a janela é suficientemente grande para conter o sobreposição). Isso é útil em casos onde a sobreposição tem tanto cabeçalho e controles rodapé da interface do usuário o qual o usuário pode precisar de acesso.
http://developer.yahoo.com/yui/docs/ YAHOO.widget.Overlay.html