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

时间:2020-05-12 人气:0

实际上细心的朋友会发现，这个顶部的工具条实则是一个平铺的背景图像，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> 
        <ul class="jd_menu" id="topNav"> 
<li><a href="https://m.qb5200.com/www.qb5200.com" target="_blank"></a></li> 
        </ul> 
</div> 
<table><tr><td height="1080"></td></tr></table> 
</body> 
</html>

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

加载全部内容