您的位置：首页 > 其它

关于body添加position:fixed会返回到网页顶部的问题

2017-07-07 11:37 363 查看

做网页免不了遇到弹窗，遮罩层这些页面，当有遮罩层的时候需要禁止底层页面滑动，本来使用event.stopPropagation();阻止事件冒泡在安卓端就是可以实现的，但是在ios上这个并不起作用。

所以为了方便在弹出遮罩层的同时给body设置'position':'fixed';'top':'负的当前浏览器顶部距离页面顶部距离';此时，点击遮罩层的时候底层页面不动且页面位置正好；但是点击遮罩层蒙版的灰板时网页依旧会返回到页面的顶部；

所以，可以将“当前浏览器顶部距离页面顶部距离”设置成一个全局变量，当遮罩层消失的时候让滚动条向上滚动“当前浏览器顶部距离页面顶部距离”，即可实现既定效果。

代码如下：

<!DOCTYPE html>

<html>

   <head>

       <meta charset="UTF-8">

       <title></title>

   </head>

   <style type="text/css">

       *{

           margin: 0;

           padding: 0;

       }

       ul,li{

           list-style: none;

       }

       li{

           display: block;

           width: 100%;

           height: 0.8rem;

           font-size: 0.25rem;

           background: salmon;

           border-bottom: 1px solid aqua;

       }

       input{

           width: 1.5rem;

           height: 0.88rem;

           font-size: 0.45rem;

       }

       #men{

           display: none;

       }

       #menbg{

           position: fixed;

           width: 100%;

           height: 100%;

           background: black;

           opacity: 0.7;

           left: 0;

           top: 0;

           z-index: 2;

       }

       #con{

           width: 80%;

           height: 5rem;

           background: white;

           position: fixed;

           z-index: 3;

           top: 1rem;

           left: 10%;

       }

   </style>

   <script type="text/javascript">

    document.documentElement.style.fontSize=document.documentElement.clientWidth/7.5+'px';

</script>

   <body>

       <ul>

           <li>1</li>

           <li>2</li>

           <li>3</li>

           <li>4</li>

           <li>5</li>

           <li>6</li>

           <li>7</li>

           <li>8</li>

           <li>4d</li>

           <li>5d</li>

           <li>6d</li>

           <li>7f</li>

           <li>8f</li>

           <input type="button" name="" id="" value="dfdfaf" />

           <li>9</li>

           <li>a</li>

           <li>b</li>

           <li>c</li>

           <li>d</li>

           <li>e</li>

           <li>f</li>

           <li>g</li>

           <li>h</li>

           <li>i</li>

       </ul>



       <div id="men">

           <div id="menbg">



           </div>

           <div id="con">



           </div>

       </div>

   </body>

   <script src="js/jquery-2.1.4.js" type="text/javascript" charset="utf-8"></script>

   <script type="text/javascript">

       $(function(){

           var top;

           $('input').click(function(){

               top = $(window).scrollTop();

               $('#men').show();

               $('body').css({

                   'position':'fixed',

                   'width':'100%',

                   'top':-top

               })


9d3c
        });

           $('#menbg').bind('touchstart',function(){

               $('#men').hide();

               $('body').css({

                   'position':'static'

               })

               $(window).scrollTop(top)

           })

       })

   </script>

</html>

如果各位大神有可以解决event.stopPropagation();在安卓和iOS上兼容性问题的，期望指教；

有其他更加便捷的实现方法的也同样希望不吝赐教。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航