安严中国SEO博客建站教程 | seo地图 | 博客地图

网站移动端手机页面footer悬浮层遮挡页面底部内容的解决方法-安严苏州SEO博客
  • 安严网络!苏州SEO推广团队!
  • 提供seo技术学习教程!百度搜索词推广、seo外包服务。
  • 苏州SEO优化博客,分享网站搭建流程/seo技术教程,
  • 上海seo优化知识,网络营销推广,百度seo快排技术等SEO优化技术。
  • 网站seo服务/企业网站搭建/网站托管seo外包,请点这里网站服务

网站移动端手机页面footer悬浮层遮挡页面底部内容的解决方法

织梦CMS建站教程 安严seo 2019-01-9 23:11:15 475次浏览 已收录 0个评论 扫描二维码

作为网站搭建程序员经常在网站页面添加内容时会遇到WAP手机移动端页面悬浮层(悬浮footer)会遮挡住页面内容的情况,这里就教你怎么完善和改正这个小bug。对于header悬浮遮挡页面内容这里不做更多解释,因为我们都可以通过判断scrolltop的数字直接修改header的css样式中的position的值,由relative变为fixed就算是已经解决还是比较简单的。

在网站WEB前端手机移动端页面中,经常会需要<footer>模块或者header模块悬浮出来,跟随页面的滑动保持定位在页面的最上方或者是最下方。

手机端底部遮挡图
底部遮挡效果参考示例图片

如上图中,页面最下面的“回复主题”模块,就是跟随页面的浮动一直悬浮在页面的最下方,但是当用户将页面滑动到最下面时会挡住正文的内容,用户体验非常不好。

网站移动端手机页面footer悬浮层代码结构如下:

<section class='footer'>
<div class='reply'>回复主题</div>
</section>

实现这样的功能当然是利用position:fixed但是,使用position:fixed有一个bug,以悬浮<footer>在最下方为例(悬浮<header>同理),当页面滑到最下方的时候,由于是fixed定位,脱离了正常文档流,导致会遮挡住一部分内容。如下所示:

手机遮挡优化效果

上图中:左边是有显示问题的页面,右边为应该正常显示的页面效果图。该如何解决这个问题呢?在此,我提出三种我的看法,当然可能知识有限,如果你有更好的方法欢迎交流分享。

方法一:用Javasrript解决

用js判断解决。JS思路:当判定滑动条滑到页面内容的最底端的时候,将原本会脱离文档流的fixed定位改为不脱离文档流的relative定位即可。
这种确实也是一种方法,但是我不推荐的解决问题方式,使用脚本解决问题是最繁重的方法,能用css解决的尽量不使用脚本。
JS判断代码如下:

//滚动条在Y轴上的滚动距离
function getScrollTop(){
  return document.body.scrollTop;
}
//文档的总高度
function getScrollHeight(){ return document.body.clientHeight;
}
//浏览器视口的高度
function getWindowHeight(){
var windowHeight = 0;
     if(document.compatMode == "CSS1Compat")
    {
       windowHeight = document.documentElement.clientHeight;
    }
    else
   {
      windowHeight = document.body.clientHeight;
    }
    return windowHeight;
} //滑动监听
  window.onscroll = function(){
//滑到底部时footer定于最下方,假定<footer>的height为60
if((getScrollHeight() - getScrollTop() - getWindowHeight()) > 61)
$('.footer').css('position','fixed');
else
$('.footer').css('position','relative');
}

代码解释:计算页面的总高度减去滚动的高度和窗体的高度得到的数字如果在某个自己设定的区间时则需要改变footer的css样式。

法二:给body加上padding-bottom属性

给html页面中的<body>标签加上一个padding-bottom属性,这样正常文档流的内容距离body底部就会产生一个padding-bottom设置距离。此方法的解决思路缺点是,考虑到网站上线之后模块代码的复用及经常需要合并css文件,当其他页面不需要这个悬浮块,就会给不需要<footer>fixed定位的页面造成负担。
代码如下:

//假定<footer>的高度为60px
body{padding-bottom: 60px;}

法三:增加同级占位符<div>

这个方法强烈推荐。在<body>层最下面加一层div,这个<div>块的高度设置为与<footer>同样高,不包含任何内容,这样就可以起到一个占位符的效果,在页面最底占据与<footer>同样高度的空间,当然页面滑到最下方,原本的<footer>悬动块就会与这个占位块完美重叠。且不会对其他页面产生影响。唯一缺点是不符合语义化,增加了无实质内容的空标签,当然这个无所谓了谁会去看代码。
代码如下:

<!--充当占位符的div块,无实质内容 -->
<div style="height: 数值;"></div>
<!--fixed悬浮出来的footer -->
<section class='footer'>
<div class='reply'>回复主题</div>
</section>

上面的代码是不是看不懂。没关系那都是针对案例的。下面附上上海SEO博主安严小白通用空格div标签。ps:这个可是万能的欧!!很多时候都可以用它来占位。

<div style="height:30px"></div>

好了三种方法都介绍完了,你知道怎么完善和改正网站页面添加内容时WAP手机移动端页面悬浮层(悬浮footer)会遮挡住页面内容这个小bug了吗?


苏州SEO博客版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:网站移动端手机页面footer悬浮层遮挡页面底部内容的解决方法:https://www.feiheseo.cn/jianzhan/dede/2914.html
喜欢 (0)
[感谢支持]
分享 (0)
安严seo
关于作者:
2017年入行的一个网站seo优化技术小白。单身也很宅。没有长出倾国倾城的容貌但也迷住万千女人的心;没有拥有富可敌国的财富但也渴望征服世界的经济!

您必须 登录 才能发表评论!