Freeze jQuery UI Dialog box titlebar while scrolling

Question

I have a jQuery dialog box with content that drags out of the dialog (using jQuery draggable plugin) and onto the page. I had to change the css from "display:block" to "display:inline;" to prevent the rest of the content in the dialog box from moving to the left when I drag an element out of the dialog to the right. Now that it is inline, when I scroll down, the titlebar scrolls with the rest of the content and doesn't stay fixed on top. When I change it back to "display:block", the titlebar shows, but then when I drag something to the right out of the dialog, everything else in the dialog box moves to the left (expanding the width inside the dialog). Is there a way to freeze the titlebar and close button while I scroll down while keeping the display inline? I tried setting the titlebar to position:sticky!important but it still doesn't work. Any help would be appreciated.

Here is my code:

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

This is the css that needed to be added:

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