演示请看本站导航,不支持IE678。
HTML(header-navigation是用来指定导航样式的,id=header是用来驱动js的,这里id要和下面js里的document.getElementById相同)

  1. header class="header-navigation" id="header"
  2. 这是导航
  3. /header

CSS

  1. .header-navigation {
  2. position: fixed;
  3. top: 0;
  4. width: 100%;
  5. height: 60px;
  6. line-height: 60px;
  7. background-color: #333;
  8. text-align: center;
  9. box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
  10. z-index: 9999;
  11. }
  12.  
  13. /* Slide transitions */
  14. .slideUp {
  15. /* -webkit-transform: translateY(-100px);
  16. transform: translateY(-100px);*/
  17. -webkit-transform: translateY(-100px);
  18. -ms-transform: translateY(-100px);
  19. -o-transform: translateY(-100px);
  20. transform: translateY(-100px);
  21. /*transition: transform .5s ease-out;*/
  22. -webkit-transition: transform .5s ease-out;
  23. -o-transition: transform .5s ease-out;
  24. transition: transform .5s ease-out;
  25. }
  26.  
  27. .slideDown {
  28. /*-webkit-transform: translateY(0);
  29. transform: translateY(0);*/
  30. -webkit-transform: translateY(0);
  31. -ms-transform: translateY(0);
  32. -o-transform: translateY(0);
  33. transform: translateY(0);
  34. /*transition: transform .5s ease-out;*/
  35. -webkit-transition: transform .5s ease-out;
  36. -o-transition: transform .5s ease-out;
  37. transition: transform .5s ease-out;
  38. }

JS

  1. <script type="text/javascript">
  2. var new_scroll_position = 0;
  3. var last_scroll_position;
  4. var header = document.getElementById("header");
  5. window.addEventListener('scroll', function(e) {
  6. last_scroll_position = window.scrollY;
  7. // Scrolling down
  8. if (new_scroll_position < last_scroll_position && last_scroll_position > 80) {
  9. // header.removeClass('slideDown').addClass('slideUp');
  10. header.classList.remove("slideDown");
  11. header.classList.add("slideUp");
  12. // Scrolling up
  13. } else if (new_scroll_position > last_scroll_position) {
  14. // header.removeClass('slideUp').addClass('slideDown');
  15. header.classList.remove("slideUp");
  16. header.classList.add("slideDown");
  17. }
  18. new_scroll_position = last_scroll_position;
  19. });
  20. </script>

Tags:顶部导航, js, css3, 滚动隐藏