javascript - Calendar follow scroll but it should remain attached to the field -

i have 2 divs scroll separately.

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

if open calendar (field date) , scroll, calendar follow scroll should remain attached field.

if uncomment line

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

it seems work if scroll bottom, open calendar , scroll top calendar disappear , if click on data field doesn't appear.

the calendar datepicker of jqueryui (https://jqueryui.com/datepicker/)

using css

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

i don't expected result.

any approciated

what have define css in css folder this:

media screens can usefull in making responsive design. more information @ link: http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

@media screen , (min-width: 480px) {   #seconddiv{     position: fixed;     top: 0px;     right: 0px;   } } 

remove jquery part:

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

because css loaded after loaded picker reacts different on css