极简js和css3往上滚动智能隐藏和显示的顶部导航菜单
演示请看本站导航,不支持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;
- }