极简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;
- }
JS
- <script type="text/javascript">
- var new_scroll_position = 0;
- var last_scroll_position;
- var header = document.getElementById("header");
- window.addEventListener('scroll', function(e) {
- last_scroll_position = window.scrollY;
- // Scrolling down
- if (new_scroll_position < last_scroll_position && last_scroll_position > 80) {
- // header.removeClass('slideDown').addClass('slideUp');
- header.classList.remove("slideDown");
- header.classList.add("slideUp");
- // Scrolling up
- } else if (new_scroll_position > last_scroll_position) {
- // header.removeClass('slideUp').addClass('slideDown');
- header.classList.remove("slideUp");
- header.classList.add("slideDown");
- }
- new_scroll_position = last_scroll_position;
- });
- </script>