유비 패널 및 스크롤

Question

이렇게 정의 된 드래그 가능한 YUI 패널이 있습니다

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

패널이 표시되면 창이 스크롤 된 경우에도 항상 볼 수 있기를 원합니다. 이것은 또한 사실입니다 fixedcenter: true. 문제는 창이 스크롤되면 이전에 다른 곳에서 드래그 된 경우에도 패널을 창의 중앙에 놓는 것입니다.

창이 스크롤 될 때 패널의 위치가 창에 대해 일정하게 유지되도록 위 정의를 어떻게 수정해야합니까?

Answer 1

패널 컨테이너를 포지셔닝이 고정 된 래퍼 요소로 감싸십시오.

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

없이 패널을 구성하십시오 fixedcenter 구성 속성 및 렌더링 직후 패널을 중앙으로 중앙

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

창을 스크롤 할 때 패널은 이제 같은 위치에 있어야합니다. Firefox 3.0과 Internet Explorer 7 및 8에서만 테스트했습니다.

나는 소스를 게시했습니다 이 작업을 보여줄 자 급식 예제.

Answer 2

문서에 따라 고정 센터를 다음과 같이 설정하십시오.

"포함" 진정한 옵션과 마찬가지로 고정 중심 위치를 활성화합니다. 그러나 속성을 True로 설정하는 것과 달리 속성이 "포함 된"상태로 설정되면 오버레이가 뷰포트에 비해 너무 커지면 사용자가 창을 스크롤하거나 크기를 조정할 때 자동으로 중앙에 위치하지 않습니다 (창이 충분히 커질 때까지 오버레이를 포함하려면). 이는 오버레이에 사용자가 액세스해야 할 헤더 UI 컨트롤이있는 경우 유용합니다.

http://developer.yahoo.com/yui/docs/yahoo.widget.overlay.html