jQueryUI Datepicker on Dialog: OK on window scroll, not OK on dialog scroll

Question

I have the following example here http://jsfiddle.net/209t0drp/
where a datepicker is used on a dialog.

Both, the page and the dialog, have a scroll. Using some examples here on stackoverflow, I managed to fix the dialog while scrolling the page, but now, when I scroll the dialog's content, I would like the datepicker to move with the dialog's content, as it is part of that section.

Any idea how I can do that?

/*/////// CSS */
body{font-size:12px;}
.fixed-dialog{
  position: fixed;
  top: 150px;
  left: 50px;
}
#container { height: 5000px; }

/*/////// JS */
$(document).ready(function(){

  $('.btnOpenDialog').button().click(function(){  
      $('html, body').scrollTop(0);
      $( ".selector").dialog({ dialogClass:'fixed-dialog',modal:true});

      setTimeout("$('#dt1').focus()",100);
  });
  $('.dt').datepicker();
});

/*/////// HTML */
<div id="container">
    <div style='height:1000px'>
        <div class=filler></div>
        <br><br><span class=btnOpenDialog>Open Dialog</span>   
        <div class=filler></div>
    </div>

    <div class="selector">  <div style='height:200px;'>
        Test: <input type=text>
        <br>Date Two: <input class=dt type=text id=dt1 name=dt1 />
        <div class=filler></div>
    </div>
</div>