<!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>
<title>网页特效-CSS特效-始终固定在网页顶部的横条(一)</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312"><!--把下面代码加到<head>与</head>之间-->
<style type="text/css">
* {
 margin: 0px;
 padding: 0px;
}
#topNavWrapper {
 width: 980px;
 text-align: left;
 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(ibokee首页副本1.png);
 background-repeat: no-repeat;
 background-position: right;
 height: 89px;
}
#topNav1 {
 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(ibokee首页副本2.png);
 background-repeat: no-repeat;
 background-position: right;
 height: 32px;
}
</style>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script>
var w3c = (document.getElementById) ? true : false;
var agt = navigator.userAgent.toLowerCase();
var ie = ((agt.indexOf("msie") != -1) && (agt.indexOf("opera") == -1) && (agt.indexOf("omniweb") == -1));function IeTrueBody() {
    return (document.compatMode && document.compatMode != "BackCompat") ? document.documentElement : document.body;
}function GetScrollTop() {
    return ie ? IeTrueBody().scrollTop : window.pageYOffset;
}
$(function(){
    window.onscroll = function(){
if(GetScrollTop()==0){
        $(".topNavWrapper span").hide();
    $("#topNav").fadeIn(600);//大图显示         }else{
      $(".topNavWrapper span").show();
  
  $("#topNav").fadeOut(600);//大图隐藏
      $("#topNav1").fadeIn(600);
            $("#topNavWrapper").hover(
function(){
   $("#topNav1").fadeOut(600);
   $("#topNav").fadeIn(600);//大图显示
},
function(){
 if(GetScrollTop()!=0){
  $(".topNavWrapper span").show();
  $("#topNav").fadeOut(600);//大图隐藏
  $("#topNav1").fadeIn(600);
  
 }  
});
}
   }
   
});
</script>
</head>
<body>
<!--把下面代码加到<body>与</body>之间-->
<div class="topNavWrapper" id="topNavWrapper">
  <ul class="jd_menu" id="topNav"></ul>
  <span style="display:none"><ul class="jd_menu1"  id="topNav1"></ul></span>
</div><p style="height:3000px;"></p>
</body>
</html>