演示请看本站导航，不支持IE678。
HTML（header-navigation是用来指定导航样式的，id=header是用来驱动js的，这里id要和下面js里的document.getElementById相同）
header class="header-navigation" id="header"
这是导航
/header
CSS
.header-navigation {
position: fixed;
top: 0;
width: 100%;
height: 60px;
line-height: 60px;
background-color: #333;
text-align: center;
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
z-index: 9999;
}
/* Slide transitions */
.slideUp {
/* -webkit-transform: translateY(-100px);
transform: translateY(-100px);*/
-webkit-transform: translateY(-100px);
-ms-transform: translateY(-100px);
-o-transform: translateY(-100px);
transform: translateY(-100px);
/*transition: transform .5s ease-out;*/
-webkit-transition: transform .5s ease-out;
-o-transition: transform .5s ease-out;
transition: transform .5s ease-out;
}
.slideDown {
/*-webkit-transform: translateY(0);
transform: translateY(0);*/
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
/*transition: transform .5s ease-out;*/
-webkit-transition: transform .5s ease-out;
-o-transition: transform .5s ease-out;
transition: transform .5s ease-out;
}More »
Tags ：
顶部导航, js, css3, 滚动隐藏
