Jquery fade calender

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 landjaeger doner meatball drumstick tail...

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 () {
                $(".datepicker").datepicker();
                $(window).scroll(function () {
            if ($(this).scrollTop() > 0) {
                $('#ui-datepicker-div').fadeOut();
            }
            else {
                $('#ui-datepicker-div').fadeIn();
            }
        
        
            });


            });