JS| 页面窗口滚动时字段浮窗置顶

场景说明：

当窗口滚动至本次认款金额看不见的时候，需要将列表中的“待认领金额”和“本次认领金额”字段以浮窗形式固定在页面顶部；反之，如果滚动至本次认款金额可见时，则无需展示本浮窗。

 

 代码实现：

    <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() >= 200){ //向下滚动像素大于这个值时，即出现浮窗~
     　　　　 $('.fdPhone').fadeIn(300); //浮窗淡入的时间，越小出现的越快~
  　　　　  }else{
    　　　　  $('.fdPhone').fadeOut(300); //浮窗淡出的时间，越小消失的越快~
   　　　　 }
 　　　　 });
 　　　　 $('.actGotop').click(function(){$('html,body').animate({scrollTop: '0px'}, 800);}); //浮窗动画停留时间，越小消失的越快~
　　　　});
    </script>

特别注意:

代码分为CSS,HTML,JS三块内容，其中CSS里面需要注意一点，就是浮窗DIV的显示层级需要设置为最大，防止浮窗被其它内容遮盖

 z-index:999;