固定側邊欄也修復日期選擇器下拉菜單。怎麼解決？

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>