首页 > 网络编程 > JavaScript > 网页特效 > 典型特效 > 固定工具栏拖动无闪烁

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

2010-03-03 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> 
<div id="topNavWrapper"> 
        <ul class="jd_menu" id="topNav"> 
<li><a href="https://www.jb51.net" target="_blank">脚本之家</a></li> 
        </ul> 
</div> 
<table><tr><td height="1080"></td></tr></table> 
</body> 
</html>

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