如何通过CSS实现div的固定位置,不随页面滚动消失

最新推荐文章于 2024-04-25 15:04:32 发布

m1maomao

最新推荐文章于 2024-04-25 15:04:32 发布

阅读量841

点赞数

分类专栏： Html/Css 文章标签： javascript ViewUI

本文链接：https://blog.csdn.net/m1maomao/article/details/84208798

版权

Html/Css 专栏收录该内容

65 篇文章 0 订阅

订阅专栏

每个 Web Developer / Designer 都知道 CSS 的 position:fixed 的妙用。利用这个属性，我们可以轻松的将一个元素“固定”在页面的某个位置。这在我们做一些特殊的效果，例如页边角的小角旗，或是固定页面底下的脚注都是非常有用的。但是万恶的 IE 却对这个属性支持有问题，尽管 IE7/8 已经能够正确处理这个属性，但 IE6 的份额还是很高，所以当我们用这个属性时，还得想办法解决这个问题。

今天在一位德国朋友的博客上，看到了一个不错的通用解决方案。这里我简单介绍，或者说翻译一下作者的方法：

在 Firefox/Opera 等良好支持 W3C 标准的浏览器中，如果我们希望将某个元素固定在页面底部，我们可以给它指派这样的 CSS：

    position: fixed;
    bottom: 0;

对于 IE7 来说，它虽然可以正确的将这个元素 fix 在底部，但它却错误的处理了水平方向的位置。对于这个问题，我们可以利用一个原有的 hack 来解决：

    left: 50%;
    margin-left: -390px;

这里 margin-left 的值应该修改为您页面主要区域宽度的一半。这样 IE7 下基本也就完美了。剩下需要解决的就是 IE6, IE5.5 的问题了，他们不懂得 position: fixed 属性，所以我们需要单独解决一下：

首先我们为这些浏览器单独创建一个样式表，我们可以利用条件注释语句，让 IE<7 的浏览器单独载入这个“多于”的样式表：

    <!–[if IE lt 7]>
    <link rel=”stylesheet” href=”path/to/stylesheet/ie-stuff.css” type=”text/css” media=”screen” />
    <![endif]–>

然后我们在这个 CSS 文件中，对这个需要固定在页面底部的元素添加 CSS 属性：

    postion: absolute;
    bottom: auto;
    top: expression( eval(document.compatMode && document.compatMode==’CSS1Compat’) ? documentElement.scrollTop + (documentElement.clientHeight – this.clientHeight) – 1 : document.body.scrollTop + (document.body.clientHeight – this.clientHeight) – 1);

这里事实上就是利用了 IE 中特有的 CSS 运算符 expression。在 expression 中我们可以利用 Javascript 计算出需要的 top 值，这样就达到了与 position: fixed 同样的效果。

这种方法原理上来说和以前的 Javascript 方案是相同的，但这种方法显然通用性更好一点。当然，如果您不介意用 Javascript 的话，实现同样的效果会更直观更简单一点。