jQuery Date picker not moving with page scroll

Question

I am using the standard jQuery UI datepicker ,However when i scroll the page the date picker remains fixed . Any ideas how to solve this ?

http://jsfiddle.net/jbK6a/

Answer 1

Couldn't find any answers on this using Bootstrap and datepicker that was having an issue with the datepicker staying attached to the element when scrolling on a modal. This was my solution:

 var dateModals = (function() {
    'use strict';

    var currentInput = '';

    var setPos = function() {
        if (currentInput === '') return false;
        var $datepicker = $('.datepicker');
        var topPos = currentInput.offset().top + currentInput.outerHeight();
        if ($datepicker.hasClass('datepicker-orient-bottom')) {
            topPos -= $datepicker.outerHeight() + currentInput.parent('.date').outerHeight();
        }
        $datepicker.css('top', topPos);
    };

    var attachEvents = () => {
        $('.modal').on('scroll', function() {
            setPos();
        });

        $('.modal').on('click', '.date input.form-control', function() {
            currentInput = $(this);
        });
    };

    var initialize = (function() {
        attachEvents();
    })();

})();

If following Bootstrap & Datepicker syntax, this should play nicely.