查看: 15715|回复: 2

利用CSS实现DIV在浏览器中位置相对固定,而且IE6下滚动不闪

[复制链接]

514

主题

6310

回帖

7万

积分

管理员

创始人

Rank: 9Rank: 9Rank: 9

积分
74240
QQ
发表于 2010-4-14 00:06:43 | 显示全部楼层 |阅读模式
尹广磊公众帐号
从国外一图标博客中提取的代码,该博客的地址:http://icondock.com/

页头部分:
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. </head>
复制代码
CSS样式部分:
  1. <style type="text/css">
  2. <!--
  3. * {
  4.         margin: 0;
  5.         padding: 0;
  6. }
  7. /* body背景图要有,可以是一张空图,否则IE6下滚动时固定内容会闪动 */
  8. body {
  9.         background: #666666 url(kong.jpg) fixed left top;
  10. }

  11. /* 460是IE6下top的指定高度 */
  12. * html #dock {
  13.         position: absolute;
  14.         top: expression((460 + (ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop)) + 'px');
  15. }

  16. /* 76%是非IE6浏览器可以指定百分比top高度 */
  17. #dock_wrap > #dock {
  18.         position: fixed;
  19.         top: 76%;
  20. }
  21. #dock_wrap {
  22.         position: relative;
  23.         z-index: 20;
  24. }
  25. -->
  26. </style>
复制代码
页面body中的部分:
  1. <div id='dock_wrap'>
  2. <div id='dock'>
  3. 固定内容               
  4. </div>
  5. </div>
复制代码
下面是实例文件下载:

DIV在浏览器中位置相对固定.html (2.28 KB, 下载次数: 501)

0

主题

179

回帖

72

积分

会员

Rank: 5Rank: 5

积分
72
QQ
发表于 2010-10-21 13:53:01 | 显示全部楼层
看来要把HTML AJAX JQ等都融入进去 才能做出比较绚丽的原型

0

主题

23

回帖

99

积分

会员

产品小催

Rank: 5Rank: 5

积分
99
发表于 2014-2-12 15:44:13 | 显示全部楼层
能用axure做出右侧小绿小蓝按钮,并且随鼠标屏幕滚动吗?
QQ截图20140212154152.png
I‘m who i am。
您需要登录后才可以回帖 登录 | 新用户注册

本版积分规则

QQ|手机版|友情链接|版权声明|关于我们|Axure中文社区 |网站地图

GMT+8, 2024-4-27 03:11

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表