Javascript 固定边栏还修复了日期选择器下拉列表。如何解决？
我有一个非常简单的页面，页面左侧有一个固定的边栏。在右边的内容区，我有一个日期选择器。但我不希望侧边栏在我滚动右侧的主要内容时上下移动。因此，我用以下CSS修复了内容区域：Javascript 固定边栏还修复了日期选择器下拉列表。如何解决？,javascript,jquery,html,css,datepicker,Javascript,Jquery,Html,Css,Datepicker,我有一个非常简单的页面，页面左侧有一个固定的边栏。在右边的内容区，我有一个日期选择器。但我不希望侧边栏在我滚动右侧的主要内容时上下移动。因此，我用以下CSS修复了内容区域： .content { overflow: auto; height: 100%; } 但问题是，由于上面的CSS，当日期选择器在内容区域中打开时，它在滚动期间不会移动。这是一个完整的小提琴示例： 滚动时，日期选择器不会随字段一起移动。我怎样才能解决它？还有什么方法可以根据浏览器屏幕区域在输入字段上方或下方
.content {
overflow: auto;
height: 100%;
}
pickerPosition:“右上角”提前感谢您的建议。使用滚动事件和一些数学
$('.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
});
演示：使用滚动事件和一些数学
$('.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
});
演示：我建议在滚动期间关闭日期时间选择器是更好的主意。例如，当用户单击其他内容或滚动条时
$(".content").scroll(function() {
if ($(".datetimepicker").css("display") == "block")
$(".datetimepicker").css("display", "none");
});
我建议在滚动期间关闭datetimepicker是更好的主意。例如，当用户单击其他内容或滚动条时
$(".content").scroll(function() {
if ($(".datetimepicker").css("display") == "block")
$(".datetimepicker").css("display", "none");
});
使边栏固定并具有静态宽度，然后将边栏宽度的左边距应用于内容。而且不需要浮动，因为边栏元素已经位于与剩余DOM（固定位置）分离的层上
$（文档）.ready（函数（）{
$（'.form_datetime'）.datetimepicker({
周开始：1，
今日电话:1,，
自动关闭：1，
今日亮点：1，
startView:2，
forceParse:0，
显示子午线：1，
选择器位置：“右上角”，
});
});
html，
身体{
填充：0；
保证金：0；
}
.包装纸{
位置：相对位置；
排名：0；
左：0；
高度：100vh；
宽度：100vw；
}
.侧边栏{
位置：固定；
宽度：120px；
排名：0；
底部：0；
左：0；
背景尺寸：封面；
背景位置：中心；
}
.内容{
位置：相对位置；
左边距：120像素；
宽度：calc（100vw-120px）；
盒影：0 10px 20px rgba（0,0,0,0.19），0 6px 6px rgba（0,0,0,0.23）；
}
边栏
||
||
||
||
||
||
日期
||
||
||
||
||
||
||
||
||
||
||
||
||
||
||
||
||
||
||
||
||
||
||
||
||
||
||
||
||
||
||
||
使边栏固定并具有静态宽度，然后将边栏宽度的左边距应用于内容。而且不需要浮动，因为边栏元素已经位于与剩余DOM（固定位置）分离的层上
$（文档）.ready（函数（）{
$（'.form_datetime'）.datetimepicker({
周开始：1，
今日电话:1,，
自动关闭：1，
今日亮点：1，
startView:2，
forceParse:0，
显示子午线：1，
选择器位置：“右上角”，
});
});
html，
身体{
填充：0；
保证金：0；
}
.包装纸{
位置：相对位置；
排名：0；
左：0；
高度：100vh；
宽度：100vw；
}
.侧边栏{
位置：固定；
宽度：120px；
排名：0；
底部：0；
左：0；
背景尺寸：封面；
背景位置：中心；
}
.内容{
位置：相对位置；
左边距：120像素；
宽度：calc（100vw-120px）；
盒影：0 10px 20px rgba（0,0,0,0.19），0 6px 6px rgba（0,0,0,0.23）；
}
边栏
||
||
||
||
||
||
日期
||
||
||
||
||
||
||
||
||
||
||
||
||
||
||
||
||
||
||
||
||
||
||
||
||
||
||
||
||
||
||
||
日期选择器有一个绝对位置，因此您需要计算滚动条上的顶部位置。有什么建议吗@madalinivascuyou会用数学，比如说攀登一些高度，获得一些位置，你知道数学吧？恐怕我已经学了很长时间了。我真的很感激在小提琴或一个例子的任何更新。谢谢@MalalInVasuCuu应该考虑使侧栏固定，而不是内容。DeDePikER有绝对的位置，所以您需要计算SurrOnLoad上的顶部位置。madalinivascuyou会用数学，比如说攀登一些高度，获得一些位置，你知道数学吧？恐怕我已经学了很长时间了。我真的很感激在小提琴或一个例子的任何更新。谢谢@MalalInVasuCuu应该考虑把侧栏固定，而不是内容。非常感谢。虽然我学得晚，但我也会认真学习“数学”。但是我想知道，根据我在问题中提到的上面或下面可用的浏览器区域来打开它怎么样？你在一些ifs（你知道数学）中做一些布尔运算，以测试模式是否适合窗口和输入之间。否！！！再说一次“数学”！！！！会不会太多