滚动时冻结 jQuery UI 对话框标题栏

Question

我有一个 jQuery 对话框，其中的内容可以从对话框中拖出（使用 jQuery 可拖动插件）并拖到页面上。我必须将 css 从 "display:block" 更改为 "display:inline;" 以防止在我将元素从对话框中拖到右侧时对话框中的其余内容向左移动。现在它是内联的，当我向下滚动时，标题栏会与其余内容一起滚动并且不会固定在顶部。当我将它改回"display:block" 时，标题栏显示，但是当我将某些东西向右拖出对话框时，对话框中的所有其他内容都向左移动（扩大对话框内的宽度）。有没有办法在我向下滚动同时保持显示内联时冻结标题栏和关闭按钮？我尝试将标题栏设置为position:sticky!important，但它仍然不起作用。任何帮助，将不胜感激。

这是我的代码：

CSS:

    .my_dialog{
        overflow-x:hidden;
        max-width:600px;
        max-height:700px;
    }
    #my_div{
        display:inline;
    }
    .ui-dialog-titlebar{
        display:block;
        position:sticky!important;
        overflow:auto;
    }

HTML:

    <div id=my_div style="display:none;overflow-x:hidden;" title="Title to be displayed">
       content in here is a table with divs that are draggable (class="draggable")
   </div>
   <button onclick=myFunction();>Click me to open dialog</button>

javascript:

    function myFunction(){
    $("#my_div").dialog({
        height: 700,
        width: 600,
        position: { my: "center", at: "center", of: window },
        title: "Title to be displayed",
        dialogClass: 'my_dialog',
        buttons:[
        {
            id: "Close",
            text: "Close",
            click: function(){
                $(this).dialog('close');
            }                   
        }]
    });
     }
    $(document).ready(function(){
      $('.draggable').draggable();
    })

Answer 1

这是需要添加的 css：

.popup_div .ui-widget-header{
    display:block;
    position:sticky!important;
    top:0px;
    z-index: 99;
    overflow:auto;
}