挪动端处理飘浮层(飘浮header、footer)会遮挡住

日期:2021-02-25 类型:科技新闻 

关键词:开发一个小程序多少钱,凡科轻站小程序,微信群抽奖小程序,小程序登录页面,微信小程序 微店

在如今的前端开发网页页面中,特别是挪动端,常常会必须将<header>或是<footer>控制模块飘浮出来,追随网页页面的拖动维持精准定位在网页页面的最上方或是最正下方,以下图所示。

“回应主题”控制模块,便是追随网页页面的波动1直飘浮在网页页面的最正下方,编码构造以下。


拷贝编码
编码以下:

...
<section class='footer'>
<div class='reply-topic'>回应主题</div>
</section>
...

完成这样的作用自然是运用position:fixed。可是,应用position:fixed有1个bug,以飘浮<footer>在最正下方为例(飘浮<header>同理),当网页页面滑到最正下方的情况下,因为是fixed精准定位,摆脱了一切正常文本文档流,致使会遮挡住1一部分內容。以下所示:

上面左侧是有难题的显示信息,右侧为一切正常显示信息。那末,怎样处理这个难题呢?在此,我毛遂自荐提出3种我的观点,期待能有更好的方式。

法1. Javasrript处理

  应用js处理,判断当拖动条滑到网页页面內容的最底端情况下,将本来会摆脱文本文档流的fixed精准定位改成不摆脱文本文档流的relative精准定位便可。

  应用脚本制作处理难题是最繁杂的方式,能用css处理的尽可能不应用脚本制作,可是也是1种方式。

拷贝编码
编码以下:

//翻转条在Y轴上的翻转间距
function getScrollTop(){
  return document.body.scrollTop;
}
//文本文档的总高宽比
function getScrollHeight(){</p> <p>   return document.body.clientHeight;
}
//访问器视口的高宽比
function getWindowHeight(){
var windowHeight = 0;
     if(document.compatMode == "CSS1Compat")
    {
       windowHeight = document.documentElement.clientHeight;
    }
    else
   {
      windowHeight = document.body.clientHeight;
    }
    return windowHeight;
}</p> <p> //拖动监视
  window.onscroll = function(){
//滑究竟部时footer定于最正下方,假设<footer>的height为60
if((getScrollHeight() - getScrollTop() - getWindowHeight()) > 61)
$('.footer').css('position','fixed');
else
$('.footer').css('position','relative');
}

 法2.给body再加padding-bottom

  给html<body>标识再加1个padding-bottom特性,这样一切正常文本文档流的內容间距body底部就会造成1个padding-bottom设定的间距。

  缺陷是,考虑到到如今新项目上线以后控制模块的复用及常常必须合拼css文档,当别的网页页面不必须这个飘浮块,就会给不必须<footer>fixed精准定位的网页页面导致压力,不强烈推荐应用这类方式。

拷贝编码
编码以下:

//假设<footer>的高宽比为60px
body
{
padding-bottom: 60px;
}

法3.提升同级占位符<div>

  本人觉得这个方式最为好用,在<footer>块以外再包裹1层div,随后再提升1个与<footer>同级的<div>块,这个<div>块的高宽比设定为与<footer>一样高,不包括任何內容,这样便可以起到1个占位符的实际效果,在网页页面最底占有与<footer>一样高宽比的室内空间,自然网页页面滑到最正下方,本来的<footer>悬动块就会与这个占位块完善重合。且不容易对别的网页页面造成危害。编码以下:

  唯1缺陷是不符词义化,提升了无本质內容的空标识。

拷贝编码
编码以下:

<!-- footer外包裹1层div-->
<div>
<!--当做占位符的div块,无本质內容 -->
<div style="height:60px;"></div> </p> <p> <!--fixed飘浮出来的footer -->
<section class='footer'>
<div class='reply-topic'>回应主题</div>
</section>
</div>

 以上是我想起的3种方式,孤陋寡闻,文中若有纰漏不正确或有更好的方式,万望告之,谢谢。