`

CSS+DIV固定底部的漂浮导航条

 
阅读更多

 

经常看到各大网站(例如:天涯,网易,阿里巴巴)的底部会有一个能够固定的漂浮条,该效果可以用js实现,但是今天新鲜代码站推荐一个纯css方法,更加简洁方便。

 

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)。

<!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">

 

<!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>
<style type="text/css">
body { 
	background-image:url(a.xx); /* for IE6 */ 
	background-attachment:fixed; 
}
#bottomNav { 
	background-color:#096; 
	z-index:999; 
	position:fixed; 
	_position:absolute; /* for IE6 */
	width:100%; 
	
	bottom:0; 
	left:0; 
	_top: expression(documentElement.scrollTop + documentElement.clientHeight-this.offsetHeight); /* for IE6 */ 
	overflow:visible; 
}
</style>
</head>

<body>
<script>
for(var i=0; i<100; i++){
	document.writeln("aa<br />");
}
</script>

<div id="bottomNav">这里加入你的代码固定底部漂浮</div>
</body>
</html>
 
分享到:
评论

相关推荐

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

    在网页设计中,创建一个固定在页面底部的漂浮导航条是常见的需求,它能确保用户在滚动页面时始终保持导航可见,提供便捷的导航功能。本文将深入探讨如何使用CSS和DIV来实现这样一个多浏览器兼容的固定底部导航条。 ...

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

    23.jquery实现的动感菜单导航条源码 24.jquery实用滚动下拉菜单代码 25.jquery鼠标移动出现下拉菜单及提示特效代码 26.jquery外国滚动型多级展开菜单插件(jGlideMenu)下载 27.jquery自由滚动切换 标签式...

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

    16. jQuery动态切换网页背景的大块图片的导航栏代码 17. jquery图文排行混合互相切换效果(仿Vancl效果) 18. jQuery图片插件之鼠标放在图片上出现动态的hover效果插件 19. jQuery图片自动轮播淡入淡出的幻灯插件...

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

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

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

    第二步涉及网页的基本布局,通过将页面划分为五个主要的div区域:头部(Header)、导航条(Navigation)、主要内容(Content)、侧边栏(Sidebar)和页脚(Footer)。其中,页脚的CSS样式定义为`#footer`,确保它...

    JavaScript_JQuery_CSS_CSS_DIV漂亮的实例123个

    2. jquery+css五屏焦点图淡入淡出+圆形按钮切换广告图片代码 3. jQuery+CSS实用图片收缩与放大效果插件 4. jquery+div实现同时滑动切换的图文展示特效插件下载 5. jquery+div带动画按钮图片手动与自动切换的...

    JavaScript_JQuery_CSS_DIV漂亮的实例

    16. jQuery动态切换网页背景的大块图片的导航栏代码 17. jquery图文排行混合互相切换效果(仿Vancl效果) 18. jQuery图片插件之鼠标放在图片上出现动态的hover效果插件 19. jQuery图片自动轮播淡入淡出的幻灯插件...

    Jquery 跟随滚动条漂浮层

    总结,使用jQuery实现跟随滚动条的漂浮层效果,主要涉及CSS固定定位、jQuery的事件监听和DOM操作。通过这些技术,我们可以创建出用户滚动页面时始终可见的元素,提升用户体验。在实际应用中,还需要结合具体项目需求...

    div悬浮效果

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

    页面随意漂浮代码

    例如,当用户滚动到页面底部时,广告条可以固定在底部。 ```javascript window.addEventListener('scroll', function() { var floatingAd = document.getElementById('floatingAd'); var windowBottom = window....

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

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

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

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

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

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

    jquery 动态示例

    16. jQuery动态切换网页背景的大块图片的导航栏代码 17. jquery图文排行混合互相切换效果(仿Vancl效果) 18. jQuery图片插件之鼠标放在图片上出现动态的hover效果插件 19. jQuery图片自动轮播淡入淡出的幻灯插件...

    网页广告 代码全集 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章 窗口特效与弹出式警告 ...

    程序天下: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