0 0

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

请教如何通过CSS实现div的固定位置,不随页面滚动消失。就像天涯效果,或者在页面的右下角有一个区域,一直显示。
问题补充:
请教如何通过CSS实现div的固定位置,不随页面滚动消失。就像天涯效果,或者在页面的右下角有一个区域,一直显示。并且兼容IE6、IE7、FireFox等主流浏览器。
CSS 
2009年10月18日 20:53
  • 大小: 991 Bytes

3个答案 按时间排序 按投票排序

0 0

哈哈~忽然注意到javaeye里就有一个现成的例子啊~
之前也一直在找通用兼容的解决方法~嘿嘿~可以参考一下csdn上的一些例子~
楼上的~待抽空再去验证一下~

2009年10月27日 00:48
0 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 的话,实现同样的效果会更直观更简单一点。

2009年10月18日 21:03
0 0

参考例子

http://blog.syradio.cn/?uid-2-action-viewspace-itemid-57
http://blog.csdn.net/xieyaa/archive/2009/07/20/4363981.aspx

2009年10月18日 20:55

相关推荐

    纯css实现table滚动条(纯css实现div滚动条)

    纯css实现table滚动条(纯css实现div滚动条),主要是通过设定高度/宽度及overflow:auto;实现.

    网页局部div随滚动条置顶滚动

    网页局部div随滚动条置顶滚动是一种常见的网页交互设计,常用于新闻网站、电商页面或者任何需要突出显示特定内容的场景。这种效果使得用户在滚动页面时,某个div元素(通常包含重要信息或导航)始终保持在视口顶部,...

    css将div层固定显示在页面底部不随滚动条滚动

    总结来说,要创建一个不随滚动条滚动而始终保持在页面底部的div元素,我们使用了CSS的position属性,并将其值设为fixed。这样我们就可以通过调整right和bottom属性来控制元素距离窗口边缘的位置,同时设置width和...

    纯css控制内容随滚动条滚动,可放任意位置

    标题“纯css控制内容随滚动条滚动,可放任意位置”以及描述中的“纯CSS实现客服悬浮窗,随浏览器滚动而滚动。可任意自定义位置。代码简洁易懂。兼容一切主流浏览器”都指向了这一技术——固定定位(fixed ...

    CSS+DIV固定顶部导航代码-不跟随页面滚动,附源文件,经典收藏

    在网页设计中,创建一个固定在顶部且不会随页面滚动的导航栏是非常常见的需求,这样可以确保用户在浏览页面时始终能快速访问导航链接。这个主题的标题“CSS+DIV固定顶部导航代码-不跟随页面滚动,附源文件,经典收藏...

    DIV+CSS实现横向无缝图片滚动效果

    标题中的“DIV+CSS实现横向无缝图片滚动效果”是指在网页设计中,通过HTML的`&lt;div&gt;`元素和CSS样式来创建一个可以水平无限循环滚动的图片展示区域。这种效果通常用于网站的横幅广告、产品展示或者新闻更新等部分,以...

    用CSS3实现无限循环的无缝滚动的实例代码

    通过上述方法,我们可以用纯CSS实现无限循环的无缝滚动动画。这一技术不仅适用于简单的滚动显示,还可以扩展到更复杂的动画效果中。对于开发者而言,掌握CSS3中关于动画的这些高级用法,将有助于提升开发效率,并让...

    固定div,滚动到顶部固定

    在网页设计中,"固定div,滚动到顶部固定"是一种常见的布局技巧,它可以使特定的div元素在页面滚动时始终保持在视口的可见位置,通常用于实现导航栏、侧边栏等元素的固定效果。这种效果可以提升用户体验,因为用户...

    使用JS+CSS实现DIV层自适应高度和宽度

    我们了解了CSS基础知识、JavaScript基础知识、获取浏览器窗口的高度、实现DIV层自适应高度、实现DIV层自适应宽度和监听窗口resize事件等知识点。这些知识点将帮助我们更好地实现网页的自适应设计。

    滚动条下拉DIV固定在头部不动

    标题“滚动条下拉DIV固定在头部不动”指的是在网页设计中实现的一种特效,当用户滚动页面时,某个特定的DIV元素(例如一个导航栏)会保持在屏幕顶部,即使页面其他部分向下滚动,这个元素依然固定在视口的顶部。...

    css特效 DIV_CSS图片滚动效果

    它能够控制页面元素的布局、颜色、字体、大小等视觉表现,而“CSS特效”则是指利用CSS实现的各种视觉交互效果。在本教程中,我们将探讨“CSS特效:DIV+CSS图片滚动效果”。 1. **什么是DIV?** - `div`是HTML中的...

    jQuery固定导航随页面滚动颜色渐变

    "jQuery固定导航随页面滚动颜色渐变"这个主题涉及到的技术点主要是利用jQuery库来实现导航栏随着页面滚动而动态改变颜色的效果,为用户带来更丰富的视觉体验。 首先,我们需要了解jQuery库。jQuery是一个快速、简洁...

    CSS固定层-不随滚动条滚动.htm

    一个html 演示了一个CSS固定层-不随滚动条滚动的效果 有源码

    div随滚动条上下滚动

    `,并指定`top`和`left`属性,该`div`就会固定在屏幕的相应位置,不随页面内容的滚动而移动。 2. **jQuery实现** jQuery提供了方便的DOM操作和事件处理,使得实现这个效果更简洁。可以监听窗口的滚动事件`$(window...

    纯CSS实现div弹出对话框

    纯CSS实现div弹出对话框 可以应用于C#,.net 里面。 页面比较好看。

    css+div实现大括号.zip

    1. **定位**:通过`position`属性,我们可以将`div`元素放置在页面上的任意位置。可以设置`position: absolute;`或`position: fixed;`,然后使用`top`, `right`, `bottom`, `left`属性来精确控制元素的位置。 2. **...

    Html+CSS实现滚动条不挤占内容区宽度.zip

    总的来说,通过理解和掌握这些 CSS3 的滚动条样式技巧,开发者能够实现滚动条不挤占内容区的布局,从而优化网页的用户体验。同时,结合提供的博客链接(https://blog.csdn.net/fukaiit/article/details/100069537)...

    div模块层随页面滚动遇顶固定的两种方法(js&jQuery)

    我一直以为是某个div或层随屏幕滚动,遇顶则固定,离开浏览器顶部又还原这样的例子其实不少,其实它的名字叫“层的智能浮动效果”。目前我们在国内的商业网站上就常常看到这样的效果了。例如淘宝网的搜索结果页的...

    CCS固定位置,DIV固定位置

    绝对定位则将元素相对于最近的非静态定位祖先元素进行定位,而固定定位则与视口(浏览器窗口)有关,元素的位置不会随页面滚动而改变,始终保持在屏幕的特定位置。 固定定位的关键属性是`position`和`top`、`right`...

    DIV滚动悬浮层(滚动条动,层不动)

    在网页设计中,"DIV滚动悬浮层"是一种常见的交互效果,它使得某个元素(通常是一个包含重要信息或功能的div)在用户滚动页面时始终保持在屏幕的特定位置,提供持续的可视性和可访问性。这种效果可以用于侧边栏菜单、...

Global site tag (gtag.js) - Google Analytics