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

Question

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

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

但问题是，由于上述CSS的，当日期选取器在内容区域中打开，它在滚动过程中不会移动。这里是一个完整的例子在这个小提琴： 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/

Answer 2

我建议滚动期间关闭的DateTimePicker是更好的主意。就像用户点击其他内容或滚动条时一样。

$(".content").scroll(function() { 
     if ($(".datetimepicker").css("display") == "block") 
      $(".datetimepicker").css("display", "none"); 
    }); 

Answer 3

使侧边栏固定并具有静态宽度，然后应用一个左边距与侧边栏宽度的内容。而且也没有必要上浮，因为边栏元素已经从剩余的DOM（固定位置）的独立层

$(document).ready(function() { 
 
    $('.form_datetime').datetimepicker({ 
 
    weekStart: 1, 
 
    todayBtn: 1, 
 
    autoclose: 1, 
 
    todayHighlight: 1, 
 
    startView: 2, 
 
    forceParse: 0, 
 
    showMeridian: 1, 
 
    pickerPosition: 'top-right', 
 
    }); 
 
});

html, 
 
body { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
.wrapper { 
 
    position: relative; 
 
    top: 0; 
 
    left: 0; 
 
    height: 100vh; 
 
    width: 100vw; 
 
} 
 

 
.sidebar { 
 
    position: fixed; 
 
    width: 120px; 
 
    top: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    background-size: cover; 
 
    background-position: center center; 
 
} 
 

 
.content { 
 
    position: relative; 
 
    margin-left: 120px; 
 
    width: calc(100vw - 120px); 
 
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/smalot-bootstrap-datetimepicker/2.4.4/css/bootstrap-datetimepicker.min.css" rel="stylesheet" /> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/smalot-bootstrap-datetimepicker/2.4.4/js/bootstrap-datetimepicker.min.js"></script> 
 
<div class="wrapper"> 
 
    <div class="sidebar"> 
 
    <div class="sidebar-wrapper"> 
 
     <p>Sidebar</p> 
 
    </div> 
 
    </div> 
 
    <div class="content"> 
 
    <p> 
 
     ||<br> || 
 
     <br> || 
 
     <br> || 
 
     <br> || 
 
     <br> || 
 
     <br> 
 
    </p> 
 
    <div class="form-group"> 
 
     <label for="name" class="col-md-2">Date</label> 
 
     <div class="col-md-5"> 
 
     <div class="input-group date form_datetime" id="datetimepicker"> 
 
      <input class="form-control" size="16" type="text" value="" readonly> 
 
      <span class="input-group-addon"><span class="fa fa-times-circle"></span></span> 
 
      <span class="input-group-addon"><span class="fa fa-calendar"></span></span> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <p> 
 
     ||<br> || 
 
     <br> || 
 
     <br> || 
 
     <br> || 
 
     <br> || 
 
     <br> || 
 
     <br> || 
 
     <br> || 
 
     <br> || 
 
     <br> || 
 
     <br> || 
 
     <br> || 
 
     <br> || 
 
     <br> || 
 
     <br> || 
 
     <br> || 
 
     <br> || 
 
     <br> || 
 
     <br> || 
 
     <br> || 
 
     <br> || 
 
     <br> || 
 
     <br> || 
 
     <br> || 
 
     <br> || 
 
     <br> || 
 
     <br> || 
 
     <br> || 
 
     <br> || 
 
     <br> || 
 
     <br> || 
 
     <br> 
 
    </p> 
 
    </div> 
 
</div>