Jquery animate datepicker w/ scroll fade

by kmburke84

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/sunny/jquery-ui.css">
<script src="http://code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
<form id="PandEsubmit">
    <table id="formtable">
        <tr>
            <td class="bold">Job#:</td>
            <td>
                <input type="text" name="JobNumber:" value="">
            </td>
            <td class="bold">P&E Target Date:</td>
            <td>
                <input type="text" name="P&ETargetDateFrom:" class="datepicker">
            </td>
            <td class="bold">To:</td>
            <td>
                <input type="text" name="P&ETargetDateTo" class="datepicker">
            </td>
        </tr>
        <tr>
            <td class="bold">P&E Lead:</td>
            <td>
                <input type="text" name="P&ELead:">
            </td>
            <td class="bold">P&E Actual Date:</td>
            <td>
                <input type="text" name="P&EActualDateFrom:" class="datepicker">
            </td>
            <td class="bold">To:</td>
            <td>
                <input type="text" name="P&EActualDateTo:" class="datepicker">
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <input type="radio" name="jobs" value="CompletedJobs" />
                <div class="bold float" style="
                         padding-right: 115px;">Completed Jobs</div>
            </td>
            <td>
                <input type="radio" name="jobs" value="NotCompletedJobs" />
                <div class="bold float" style="
                         padding-left: 18px;">Not Completed Jobs</div>
            </td>
        </tr>
        <tr>
            <td>
                <input type="submit" title="search">
            </td>
            <td>
                <input type="reset" </td>
        </tr>
    </table>
</form>
<p>Bacon ipsum dolor amet flank cow turducken turkey. Leberkas turkey tri-tip tenderloin shank pig. Shankle capicola bacon, beef ribs...

CSS

body {
    padding-top: 50px;
    padding-bottom: 20px;
}
/* Set padding to keep content from hitting the edges */
 .body-content {
    padding-left: 15px;
    padding-right: 15px;
}
/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
 .dl-horizontal dt {
    white-space: normal;
}
/* Set width on the form input elements since they're 100% wide by default */
 input, select, textarea {
    max-width: 280px;
}
tfoot {
    display: table-header-group;
}
td {
    padding-bottom:10px;
    padding-right:10px;
}
form {
    padding:20px;
    margin:30px 0 30px 0;
    border: 2px dashed #A5A4A4;
    height:1000px;
}
#tblmain_filter {
    display:none;
}
.bold {
    font-weight:bold;
}
.float {
    float:right;
}

JavaScript

$(function () {
    var datePicker =$(function(){
      $(".datepicker").datepicker();
    });
    $('.datepicker').mousedown(function() {
        $('#ui-datepicker-div').toggle({
            height:"show"
        });
    });
    
    
    $(window).scroll(function () {
        if ($(this).scrollTop() > 0) {
            $("#ui-datepicker-div").fadeOut();
        } else {
            $("#ui-datepicker-div").fadeIn();
        }
    });
});