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;

  

 

posted @ 2020-04-09 15:00  IT_吴彦祖  阅读(409)  评论(0编辑  收藏  举报