演示请看本站导航，不支持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.     }

More »