CSS实例：定位DIV层始终保持在当前可见屏或当前_CSS教程,DIV CSS视频教程,DIV CSS模板,DIV CSS布局入门教程

看到很多网站有这样的广告，网站页面两边各放一个方块图片广告，拖动滚动条时广告随之动滚，始终停留在当前屏幕的下方或上方。
对于这种漂浮广告，我相信很多用户都非常不爽！
看下面两个图的应用。
当同一种技术实现的效果被应用在了不同的地方，就产生了明显的体验差别。
它们的不同点在于是否应用户需求而设计。

淘宝产品列表（已改版，没了）
DIV层定位

腾讯财经产业经济 http://finance.qq.com/industry/index.htm
DIV层定位

如何实现？
scrollTop是什么？当元素内部的内容高度超过元素本身的高度时就会出现滚动条，随着拖动滚动条而被隐去的上面部分的高度就是scrollTop值。
这种定位层就是当页面触发onscroll事件时，取得scrollTop值并写入定位层CSS属性，使之保持位置。
另外，IE6不支持position:fixed，只能用position:absolute特殊处理，当然你也可以忽略IE6
听不懂？看演示吧

<!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-Type" content="text/html; charset=utf-8" /> <title>定位层</title> <script type="text/javascript" src="http://www.aa25.cn//uploadfile/jquery-latest.pack.js"></script> <style type="text/css"> body{padding:10px;margin:0;} #box{width:960px;margin:0 auto;} #box1{width:250px;height:25px;position:relative;} #box1_1{width:250px;height:25px;line-height:25px;background:#f00;color:#fff;} p{font-size:24px;margin:10px 0;} </style> <script type="text/javascript"> function tools(){ var top=$(document).scrollTop(); if(($.browser.msie==true)&&($.browser.version==6.0)){ if(top>168)$("#box1_1").css({position:"absolute",top:top-168}); }else{ if(top>168)$("#box1_1").css({position:"fixed",top:0}); } if(top<=168)$("#box1_1").css({position:"static",top:0}); } $(function(){ window.onscroll=tools; window.onresize=tools; }); </script> </head> <body> <div id="box"> <p>往下拖动滚动条↓ITFeed 花匠</p> <p>ITFeed ITFeed ITFeed ITFeed 花匠</p> <p>ITFeed ITFeed ITFeed ITFeed 花匠</p> <p>ITFeed ITFeed ITFeed ITFeed 花匠</p> <div id="box1"><div id="box1_1">这里是定位层</div></div> <p>ITFeed ITFeed ITFeed ITFeed 花匠</p> <p>ITFeed ITFeed ITFeed ITFeed 花匠</p> <p>ITFeed ITFeed ITFeed ITFeed 花匠</p> <p>ITFeed ITFeed ITFeed ITFeed 花匠</p> <p>ITFeed ITFeed ITFeed ITFeed 花匠</p> <p>ITFeed ITFeed ITFeed ITFeed 花匠</p> <p>ITFeed ITFeed ITFeed ITFeed 花匠</p> <p>ITFeed ITFeed ITFeed ITFeed 花匠</p> <p>ITFeed ITFeed ITFeed ITFeed 花匠</p> <p>ITFeed ITFeed ITFeed ITFeed 花匠</p> <p>ITFeed ITFeed ITFeed ITFeed 花匠</p> <p>ITFeed ITFeed ITFeed ITFeed 花匠</p> <p>ITFeed ITFeed ITFeed ITFeed 花匠</p> <p>ITFeed ITFeed ITFeed ITFeed 花匠</p> <p>ITFeed ITFeed ITFeed ITFeed 花匠</p> <p>ITFeed ITFeed ITFeed ITFeed 花匠</p> <p>ITFeed ITFeed ITFeed ITFeed 花匠</p> <p>ITFeed ITFeed ITFeed ITFeed 花匠</p> <p>ITFeed ITFeed ITFeed ITFeed 花匠</p> <p>ITFeed ITFeed ITFeed ITFeed 花匠</p> <p>ITFeed ITFeed ITFeed ITFeed 花匠</p> <p>ITFeed ITFeed ITFeed ITFeed 花匠</p> <p>ITFeed ITFeed ITFeed ITFeed 花匠</p> </div></body> </html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

CSS教程,DIV CSS视频教程,DIV CSS模板,DIV CSS布局入门教程 - CSS中国

搜索

热门标签

CSS实例：定位DIV层始终保持在当前可见屏或当前