JS | window scroll the page field floating window top

Scene Description:

When the window to scroll to the amount recognized in this paragraph are not looking, you need to list "awaiting identification amount" and "The claim amount" field to form a floating window is fixed at the top of the page; on the contrary, if the scroll to recognize this paragraph when the amount of visible, you do not need to show this floating window.

 

 Code:

    <style type="text/css">
       .fdPhone {
            width:900px;
            position: fixed;
            _position: absolute;
            position: fixed;  
            top: 0px;
            display: none;
            margin-left:3%;
             z-index:999;
        }
    </style>

    <div class="fdPhone" >
        <table class="queryTable">
            <tr>
                <td class="tdheader">待认领金额</td>
                <td class="tdcontent">
                    <input type="text" id="txt-WaitConfirmAmt1" class="form-control" disabled="disabled" />
                </td>
                <td class="tdheader">本次认领金额
                </td>
                <td class="tdcontent">
                    <input type="text" id="txt-ConfirmAmt1" class="form-control" disabled="disabled" />
                </td>
            </tr>
        </table>
    </div>

    <script type="text/javascript">
　　　　$(function(){
  　　　　$(window).scroll(function() {
    　　　　if($ (window) .scrollTop ()> 2 = 00 ) { // scroll down the pixel is greater than this value, the floating window appears ~ 
     　　　　 $ ( ' .fdPhone ' ) .fadeIn ( 300 ); // float fade window , the smaller the faster appearing ~ 
  　　　　  } the else { 
    　　　　  $ ( ' .fdPhone ' ) .fadeOut ( 300 ); // float window fade, the smaller the faster disappearance ~ 
   　　　　 } 
 　　　　 }); 
 　　　　 $ ( ' .actGotop ' ) .click (function () {$ ( ' HTML, body ' ) .animate ({scrollTop: ' 0px ' }, 800 );});// floating window animation residence time, the smaller the faster disappearance ~ 
　　　　});
     </ Script>

pay attention:

The code into CSS, HTML, JS three content, CSS need to note that there is a floating window display hierarchy DIV needs to be set to maximum, to prevent the floating window is covered by other content

 z-index:999;