解决悬浮的<header>、<footer>遮挡内容的处理技巧

在现在的前端页面中,尤其是移动端,经常会需要将<header>或者是<footer>模块悬浮出来,跟随页面的滑动保持定位在页面的最上方或者是最下方,如下图所示。

“回复主题”模块,就是跟随页面的浮动一直悬浮在页面的最下方,代码结构如下。

..
<section class=‘footer‘>
<div class=‘reply-topic‘>回复主题</div>
</section>
...

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

上面左边是有问题的显示,右边为正常显示。那么,如何解决这个问题呢?在此,我抛砖引玉提出三种我的看法,希望能有更好的方法。

法一. Javasrript解决

  使用js解决,判定当滑动条滑到页面内容的最底端的时候,将原本会脱离文档流的fixed定位改为不脱离文档流的relative定位即可。

  使用脚本解决问题是最繁重的方法,能用css解决的尽量不使用脚本,但是也是一种方法。

//滚动条在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‘);
}

法二.给body加上padding-bottom

  给html<body>标签加上一个padding-bottom属性,这样正常文档流的内容距离body底部就会产生一个padding-bottom设置的距离。

  缺点是,考虑到现在项目上线之后模块的复用及经常需要合并css文件,当其他页面不需要这个悬浮块,就会给不需要<footer>fixed定位的页面造成负担,不推荐使用这种方法。

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

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

  个人认为这个方法最为实用,在<footer>块之外再包裹一层div,然后再增加一个与<footer>同级的<div>块,这个<div>块的高度设置为与<footer>同样高,不包含任何内容,这样就可以起到一个占位符的效果,在页面最底占据与<footer>同样高度的空间,当然页面滑到最下方,原本的<footer>悬动块就会与这个占位块完美重叠。且不会对其他页面产生影响。代码如下:

  唯一缺点是不符合语义化,增加了无实质内容的空标签。

<!-- footer外包裹一层div-->
<div>
<!--充当占位符的div块,无实质内容 -->
<div style="height:60px;"></div>

<!--fixed悬浮出来的footer -->
<section class=‘footer‘>
<div class=‘reply-topic‘>回复主题</div>
</section>
</div>

以上是我想到的三种方法,才疏学浅,文中若有纰漏错误或者有更好的方法,万望告知,感谢。

时间: 2024-10-11 17:59:25

解决悬浮的<header>、<footer>遮挡内容的处理技巧的相关文章

【技巧篇】解决悬浮的&lt;header&gt;、&lt;footer&gt;遮挡内容的处理技巧(转)

引言 在现在的前端页面中,尤其是移动端,经常会需要将<header>或者是<footer>模块悬浮出来,跟随页面的滑动保持定位在页面的最上方或者是最下方,如下图所示. “回复主题”模块,就是跟随页面的浮动一直悬浮在页面的最下方,代码结构如下. 1 ... 2 <section class='footer'> 3 <div class='reply-topic'>回复主题</div> 4 </section> 5 ... 实现这样的功能

解决header,footer等HTML5标签在IE(IE6/IE7/IE8)无效的方法

HTML5的语义化标签以及属性,可以让开发者非常方便地实现清晰的web页面布局,加上CSS3的效果渲染,快速建立丰富灵活的web页面显得非常简单. HTML5的新标签元素有: <header>定义页面或区段的头部: <footer>定义页面或区段的尾部: <nav>定义页面或区段的导航区域: <section>页面的逻辑区域或内容组合: <article>定义正文或一篇完整的内容: <aside>定义补充或相关内容: 使用他们能让代码

css解决无论页面长短footer永远置底

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Typ

【翻译自mos文章】怎么检测并解决datafile os header(Block Zero)的 损坏- - ORA-27047 DBV-107 ORA-1157/ORA-27048

怎么检测并解决datafile os header(Block Zero)的 损坏- - ORA-27047 DBV-107 ORA-1157/ORA-27048 来源于: How to Detect and Fix a Corruption in the Datafile OS Header/Block Zero - ORA-27047 DBV-107 ORA-1157/ORA-27048 (文档 ID 360032.1) 适用于: Oracle Database - Enterprise E

WPF Popup 控件导致被遮挡内容不刷新的原因

WPF Popup 控件导致被遮挡内容不刷新的原因 周银辉 今天在写一个WPF控件时用到了Popup控件,很郁闷的情况是:当popup关闭时,原来被popup挡住的界面部分不刷新,非要手动刷新一下(比如最大最小化一下窗口),就连网上传说的这个方法也不行 ? 1 2 3 4 5 6 7 8 9 10 public static class UiHelper {     private delegate void NoArgDelegate();     public static void Ref

谷歌下解决Pop遮罩层无法遮挡滚动条下问题

进入下载 今天用pop的弹出窗口里,出现一个问题,当网页出现滚动条里,不能遮挡住,解决Pop遮罩层无法遮挡滚动条下问题.

在布局中添加头尾框(Header/Footer)

效果如下: 源码: <!DOCTYPE html> <html> <head> <title>Header/footer</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <meta http-equiv="X-UA-Compatible" content="

利用gulp解决前后端分离的header/footer引入问题

在我们进行前后端完全分离的时候,有一个问题一直是挺头疼的,那就是公共header和footer的引入.在传统利用后端渲染的情况下,我们可以把header.footer写成两个单独的模板,然后用后端语言的include即可在其他页面中引入.我之前在<一个简单粗暴的前后端分离方案>这篇文章中说过一种方法,就是用handlebars把header.footer模板预编译为js文件,然后在页面的头部用document.write写到页面中.这种方式的弊端也比较明显,那就是依赖一个模板引擎.在使用mvv

gulp将header/footer引入页面

前言:在写静态页面的时候,公共的头部和底部or侧边栏一样,每写一个页面,都要复制粘贴,每当修改后,还要对原先的header.footer修改,这及其麻烦:不更新,部分效果又看不到影响总体效果. 解决:用gulp的插件可以将header.footer.sidebar的静态页面引入每一个需要的页面,只需要写一段注释,编译时,会在注释内将header.footer.sidebar模板页面插入.比如: 替换后每次修改,每个引入的页面都会修改 需要用到的模块有:gulp.fs.gulp-replace这三