日历跟随滚动，但它应该保持附加到字段

Question

我有两个div分别滚动。

http://jsfiddle.net/kv8ggqm7/1/

如果我打开日历(字段DATE)并滚动，日历跟随滚动条，但它应该保持附属于该字段。

如果取消注释

$('#ui-datepicker-div').css('position','fixed');

似乎工作，但如果我滚动到底部，打开日历并滚动到顶部日历消失，如果我点击数据字段它不出现。

日历是jQueryUI (https://jqueryui.com/datepicker/)的日期选择器

使用像 这样的css

#ui-datepicker-div
{
     position : fixed !important;
} 

我没有得到预期的结果。

任何帮助将被授予

Answer 1

你要做的就是在css文件夹中定义css，像这样:

媒体屏幕在响应式设计中非常有用。欲了解更多信息，请查看此链接:http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

@media screen and (min-width: 480px) {
  #secondDiv{
    position: fixed;
    top: 0px;
    Right: 0px;
  }
}

删除jquery部分:

$(document).ready(function () {
$('#calendar').datepicker();
/* remove this part */
/*
$(window).scroll(function () {
    if ($(window).width() > 480)
    {
         //$('#ui-datepicker-div').css('position','fixed');
         $('#secondDiv').css('top', $(this).scrollTop());
    }
   });    
*/
});

因为css是在所有内容加载后加载的所以选择器对css的反应不同