CSS 网页顶部固定工具栏拖动无闪烁实现代码

ttx9n · 发表于 2010-3-3 23:26:38

在天涯社区发现的一个始终固顶工具栏，用CSs代码布局，原先发现有少这样的顶部工具条，但有很多在拖动滚动条的时候有闪烁现象，竟然发现天涯这个没有闪烁，于是花点时间从天涯扒下来，这就是完整的代码实际上细心的朋友会发现，这个顶部的工具条实则是一个平铺的背景图像，CSS起到固定背景的作用，也算是一种独特的实现方法。

<!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=gb2312" /> 
<title>顶部拖动无闪烁菜单栏</title> 
<style type="text/css"> 
* 
{ 
    margin: 0px; 
    padding: 0px; 
} 
body { 
    background-image: url(); 
    background-attachment: fixed; 
} 
#topNavWrapper { 
    width: 980px; 
    text-align: left; 
    height: 31px; 
    margin: 0px auto; 
    z-index:100; 
    _position: relative ; 
    _top:0px; 
} 
#topNav { 
    width: 980px; 
    float: left; 
    display: block; 
    z-index: 100; 
    overflow: visible; 
    position: fixed; 
    top: 0px; /* position fixed for IE6 */ 
    _position: absolute; 
    _top: expression(documentElement.scrollTop + "px"); 
    background-image: url(/upload/2010-3/20100303232637297.gif); 
    background-repeat: no-repeat; 
    background-position: right; 
    height: 31px; 
} 
</style> 
</head> 
<body> 
 
        <ul class="jd_menu" id="topNav"> 
<li><a href="https://www.jb51.net/www.jb51.net" target="_blank">脚本之家</a></li> 
        </ul> 
 
<table><tr><td height="1080"></td></tr></table> 
</body> 
</html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

.l4 · 发表于 2022-9-26 00:05:38

哦哦哦哦哦哦哦哦哦

醉梦娱乐网 · 发表于 2022-10-14 16:44:18

抽根烟，下来看看再说

kwzc65wdj · 发表于 2022-12-18 00:25:40

天天源码社区www.tiantianym.com

qwe520 · 发表于 2023-2-18 13:15:26

8888888888888888

ki9ku6 · 发表于 2023-4-7 07:02:28

很不错的样子

95nd4ba · 发表于 2023-4-18 13:16:34

刷刷刷刷刷刷刷刷刷刷刷刷刷刷刷

溪谷玉贤 · 发表于 2023-8-23 02:25:59

感谢楼主分享

x20yd3qx · 发表于 2023-8-25 11:26:43

看看怎么样再说

ki9ku6 · 发表于 2023-9-11 23:00:51

刷屏刷屏刷屏

账号		自动登录	找回密码
密码			立即注册

[JavaScript] CSS 网页顶部固定工具栏拖动无闪烁实现代码

相关帖子