`
m635674608
  • 浏览: 5042450 次
  • 性别: Icon_minigender_1
  • 来自: 南京
社区版块
存档分类
最新评论

CSS+DIV固定底部的漂浮导航条(多浏览器兼容)

 
阅读更多

在项目中。为了解决多浏览器兼容的问题。。ie6很头痛。div经常出现浮动。。。。

然后在网上找了一个例子。。。。

css代码如下:

body { background-image:url(text.txt); /* for IE6 */ 
background-attachment:fixed; }
 #bottomNav { background-color:#096; z-index:999; position:fixed; bottom:0; left:0; width:100%; _position:absolute; /* for IE6 */
 _top: expression(documentElement.scrollTop + documentElement.clientHeight-this.offsetHeight); /* for IE6 */ overflow:visible; }

 

html代码如下:

<div id="bottomNav">这里加入你的代码固定底部漂浮</div>

 

再看看这些需要注意的地方: 

_top: expression(documentElement.scrollTop + documentElement.clientHeight-this.offsetHeight); 
看到 _top 是为IE6独家准备的,但是当我只加了上面这句时,IE6下拉动滚动条看到的这个漂浮物是抖动的-_-||| 解决方法我们为IE6添加这样一条语句: 
background-image:url(text.txt);
注意这里的 text.txt 其实不需要有这个txt文档,txt的文件名叫什么看自己喜好喽,如此一来我们就解决了IE6下的缓动问题。

 

PS:你可能会对 text.txt 和 expression 感到郁闷,也有人使用多嵌套一层 DIV 做了个假滚动条实现了这个方法,当然这种方法在也会相应的改动下默认属性,可这种写法和之前网站融合起来很郁闷,要添加一个DIV(因为我之前没有在最外层写DIV.wrap)。

分享到:
评论

相关推荐

    JQuery&CSS;&CSS;+DIV实例大全.rar

    站长推荐全新兼容DIV+CSS版中国地图 JS+DIV+CSS支持热点效果的中国地图 16.支持4级树形 展开菜单插件dTree原版下载 2)JQuery Tab 1.jQuery.Switchable常见网页UI组件(整合Tabs、Slide、Scrollable等插件) 2....

    100多个JQuery效果示例(实例)div+css+javascrpit

    104. 推荐jQuery兼容所有浏览器的自定义多样式图片幻灯片插件(KinSlideshow)下载 105. 推荐jquery动画制作示例图片滚动和飞行乌鸦,车窗效果,非常强大 106. 推荐jQuery实用缩略图广告效果插件下载 107. 推荐jQuery...

    用CSS实现跟随滚动条漂浮层代码

    总的来说,CSS的`position`属性是实现跟随滚动条漂浮层的关键。通过巧妙地设置`top`、`bottom`、`left`和`right`属性,你可以自由地定制漂浮层在页面上的位置,为用户提供更流畅的浏览体验。在实际项目中,可以结合...

    DIV+CSS网页设计实例教程.docx

    《DIV+CSS网页设计实例教程...通过这个教程,学习者将能够理解如何利用DIV和CSS构建响应式的网页布局,掌握网页设计的核心技术,以及解决不同浏览器之间的兼容性问题。通过实践这些步骤,可以创建出专业且美观的网页。

    JavaScript_JQuery_CSS_CSS_DIV漂亮的实例123个

    104. 推荐jQuery兼容所有浏览器的自定义多样式图片幻灯片插件(KinSlideshow)下载 105. 推荐jquery动画制作示例图片滚动和飞行乌鸦,车窗效果,非常强大 106. 推荐jQuery实用缩略图广告效果插件下载 107. 推荐...

    JavaScript_JQuery_CSS_DIV漂亮的实例

    13. jQuery仿新浪新闻图片浏览器(支持鼠标左右滚动控制图片切换) 14. jquery仿苏宁易购商城产品图片全方位展示功能 15. jquery制作漂亮按钮示例打包 16. jQuery动态切换网页背景的大块图片的导航栏代码 17. ...

    Jquery 跟随滚动条漂浮层

    3. **兼容性检查**:虽然大部分现代浏览器都支持jQuery和CSS固定定位,但应确保在不支持的浏览器中提供降级方案。 总结,使用jQuery实现跟随滚动条的漂浮层效果,主要涉及CSS固定定位、jQuery的事件监听和DOM操作。...

    页面随意漂浮代码

    这种效果常见于网站的侧边栏广告、在线聊天窗口或者固定导航菜单。下面我们将深入探讨这个主题,包括其工作原理、实现方式以及相关的JavaScript知识点。 首先,我们需要理解JavaScript是如何控制网页元素位置的。在...

    div悬浮效果

    在网页设计中,"div悬浮效果"是一种常见的交互设计手法,它使得某个元素(通常是一个div)能够在用户滚动页面时保持固定在屏幕的特定位置,类似网页广告的漂浮显示。这种效果可以用来吸引用户的注意力,例如显示重要...

    jquery简单实现滚动条下拉DIV固定在头部不动

    标题中的"jquery简单实现滚动条下拉DIV固定在头部不动"描述了一个常见的网页设计功能,即当用户滚动页面时,某个特定的DIV元素(在这个例子中是类名为`.pf`的元素)会在达到预设位置(这里是250像素)后,始终保持在...

    两边漂浮和中间漂浮组合.rar

    总结来说,"两边漂浮和中间漂浮组合"是一个涉及JavaScript和CSS的网页设计特效,它通过JavaScript动态调整元素的位置,使元素在用户滚动页面时始终保持可见。理解和掌握这种技术对于提升网页用户体验和互动性具有...

    令按钮悬浮在(手机)页面底部的实现方法

    这被称为“悬浮底部按钮”或“固定底部按钮”的设计,通常用于购物车、导航或者呼叫操作等重要功能。在本文中,我们将探讨如何在手机页面上实现这一效果。 首先,我们需要了解基本的CSS样式来控制元素的位置。在...

    jquery 动态示例

    7. jquery仿flash产品图片多角度展示特效代码 8. jquery仿flash图片放大相册的插件代码(Zoomer Gallery)下载 9. jquery仿flash的图片幻灯片播放特效实例完整版 10. jquery仿LightBox图片盒子单击逐渐放大的图片...

    《程序天下:JavaScript实例自学手册》光盘源码

    11.10 网络导航条 11.11 隐藏式菜单 11.12 仿flash菜单 11.13 滚动导航菜单 11.14 幻灯片式的导航菜单 11.15 类似QQ的菜单 11.16 三级联动菜单 11.17 三级联动菜单 11.18 树型目录菜单 第12章 窗口特效与弹出式警告 ...

    网页广告 代码全集 js 广告代码 62-120 大全 (B)

    33:div+css显示对联带关闭代码下载 34:文字导航广告代码演示下载 35:文字滚动消息广告代码下载 36:大幅商品展示广告代码下载 37:TOP排列幻灯广告代码下载 38:下拉显示幻灯广告代码下载 39:文字上翻幻灯广告...

    网页广告 代码全集 js 广告代码 大全 1-61 (A)

    33:div+css显示对联带关闭代码下载 34:文字导航广告代码演示下载 35:文字滚动消息广告代码下载 36:大幅商品展示广告代码下载 37:TOP排列幻灯广告代码下载 38:下拉显示幻灯广告代码下载 39:文字上翻幻灯广告...

    程序天下:JavaScript实例自学手册

    11.10 网络导航条 11.11 隐藏式菜单 11.12 仿flash菜单 11.13 滚动导航菜单 11.14 幻灯片式的导航菜单 11.15 类似QQ的菜单 11.16 三级联动菜单 11.17 三级联动菜单 11.18 树型目录菜单 第12章 窗口特效与弹出式警告 ...

    js常用效果实例

    6. **鼠标触发漂浮div** 这个效果通常指的是当鼠标移动到某个元素上时,会有一个div(浮动元素)跟随鼠标移动。这可以用于创建提示框、工具提示或悬浮操作按钮。JavaScript用于监听鼠标的移动事件,并更新div的位置...

Global site tag (gtag.js) - Google Analytics