javascript - 固定侧边栏还修复了日期选择器下拉菜单。怎么解决？

Question

我有一个非常简单的页面，页面左侧有一个固定的边栏。在右侧的内容区域中，我有一个日期选择器。但是我不希望侧边栏在我滚动右侧的主要内容时上下移动。所以我用以下 CSS 修复了内容区域:

.content {
    overflow: auto;
    height: 100%;
}

但问题是，由于上述 CSS，当日期选择器在内容区域中打开时，它在滚动期间不会移动。这是这个 fiddle 中的一个完整示例: Fiddle

滚动时日期选择器不会随字段移动。我该如何解决？还有什么方法可以根据浏览器屏幕区域在输入字段上方或下方动态打开它？ (比如现在是在右上角打开，因为设置为pickerPosition: 'top-right'，所以不能完全看到，很不方便。)

提前感谢您的建议。

Answer 1

使用滚动事件和一些数学

$('.content').on('scroll',function(){
   var offset = $('#datetimepicker').offset().top;//get the offset of the element 
   $('.datetimepicker').css({'top':offset-$('.datetimepicker').height()-20});//set the offset to the picker modal subtract its height and the input height
});

演示:https://jsfiddle.net/xyxrrkoa/3/