Javascript 日期选择器位置未固定在弹出窗口中的文本字段中

我有一个漂亮的盒子。其中我有很长的内容。该内容包括带有日期选择器的出生日期字段

现在，当我点击字段日历时，它会出现，但当我用鼠标滚轮滚动时，它不会保留文本字段，日期选择器不会移动，它会保留在打开它的同一位置，我希望它能随滚动一起移动

Here is the FIDDLE DEMO with this issue :

只需单击弹出窗口，然后单击文本字段，然后滚动

---

我怎样才能解决这个问题

请使用

位置：固定和
页边距顶部：40px
实际问题是日期选择器的默认位置是固定的，因此滚动时会有移动

将日期选择器与文本框一起修复是不好的。我建议两种选择

最好在弹出窗口中删除滚动条（）
创建一个内联日期选择器（）
数据采集器
根据
输入
原始位置定位日历。但是，滚动时它不会重新定位。但是，您可以在fancybox
滚动条上重新定位日期选择器

afterLoad: function () {
    $('.fancybox-inner').on('scroll', function () {
        var inp = $(this).find('input.hasDatepicker');
        $('#ui-datepicker-div').css('top', inp.offset().top + inp.outerHeight());
    });
}, beforeClose: function () {
    $('.fancybox-inner').off('scroll');
}

afterLoad
和
beforeClose
是fancy box在加载fancy box之后和关闭box之前触发的回调方法

查看演示，让我知道它是否适用于您。
如果我选择了您所在的位置，我只需在滚动和调整大小时关闭日期选择器，可能没有人会介意，因为它也会关闭
onblur（）

看看这把小提琴：

请检查这把小提琴是否能用-

更改的html：-

 <input type="text" name="dateofbirth" id="dateofbirth" placeholder="Date of Birth">
 <div class='a'></div> // new div added


//新增分区
实际上日期选择器的位置是固定的，它在相同的位置，fancybox中的项目只会移动，在css文件中更改.ui日期选择器。应该这样做。这里有一些适合你需要的东西<代码>http://jsfiddle.net/PFVxK/1319/
但是请注意，我们正在摆弄默认功能，因此需要进一步定制。此摆弄无法正常工作，定位问题已解决，但未拾取日期，也未在单击其他位置后隐藏page@CodeHunter你试过我的答案了吗？这个问题在你们的回答中并没有固定下来fiddle@CodeHunter检查我的1 fiddleRemoving scroll不是一个选项，因为我必须将它保留在我的原始内容中。我想CSS在这里不是一个解决方案
 $('#dateofbirth').focus(function(){
     $( ".a" ).show();
     $( ".a" ).datepicker();
     });
     $('#dateofbirth').blur(function(){
     $( ".a" ).hide();
     });

 <input type="text" name="dateofbirth" id="dateofbirth" placeholder="Date of Birth">
 <div class='a'></div> // new div added