How to create an animated sticky header after some scrolling

In this tutorial we'll create a header, as the menu bar shown on the top, that sticks to the top of the viewport. The sticky menu bar will animate itself after some scrolling.

Just wrap the header with Menucool Float Panel, and add a few styles to your stylesheet. It is as simple as that.

• Plain JavaScript(4KB). jQuery is not required.
• Cross platform and browser support
• Completely FREE to use.

• Link float-panel.js

  <script src="float-panel.js"></script>

• Wrap the header or menu bar with Float Panel

  <div class="float-panel" data-top="0" data-scroll="200">
      <div class="content-area" style="text-align:right;">
          <a href="#" style="float:left;">
              <i class="fa fa-gg"></i>
              <em>MENUCOOL</em>
          </a>
          <a href="#"><i class="fa fa-tint"></i> Free trial</a>
          <a href="#">Subscribe</a>
          <a href="#">Services</a>
          <a href="#"><i class="fa fa-search"></i></a>
      </div>
  </div>

  • For the demo on the top we need to add an attribute data-scroll="(pixel value)" to the float panel. It tells the script to add an extra .fixed class to the float panel when the page has been scrolled more than the specified pixels.
  • If your float panel is not the header element that stays at the very top of the page (such as the vertical menu on the right), you don't need to set the data-scroll. The script will use the data-top (the distance to the top of the current visible area of the window. Its default value is 0 if not set) to determine when to fix the menu.

• The CSS

  .float-panel {
      width:100%;
      background:white;
      z-index:300;
      padding:30px 0; 
      transform: translateZ(0);
      transition:all 0.5s;
  }
  .float-panel .content-area {
      max-width:900px;
      margin:10px auto;
  }
  .float-panel a {
      font-size:16px;
      text-decoration:none;
      color:#444;
      display:inline-block;
      padding:10px 20px;
  }                  
  .float-panel .fa-gg {                  
      color:#F0595C;
      font-size:30px;
      vertical-align:middle;                  
      transition:all 1s;                  
  }

  Note: Font Awesome is also used in this demo to style the icons:
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

• The CSS3 animation

  When scrolled more than the pixels specified by the data-scroll attribute, another class fixed will be added to the Float Panel. So we can use the .fixed selector to add animated effects to the elements in the panel. For example:

  /* Float Panel: class="float-panel fixed" */
  
  .fixed {
      box-shadow:0 2px 6px rgba(0,0,0,0.2);  
      padding:4px 0;
      animation:slide-down 0.7s;
      opacity:0.9;    
  }                  
  .fixed .fa-gg {                  
      transform: rotate(360deg);      
  }
  
  @keyframes slide-down {
      0% {
          opacity: 0;
          transform: translateY(-100%);
      } 
      100% {
          opacity: 0.9;
          transform: translateY(0);
      } 
  }

  • CSS3 transition and transform properties are well supported by all modern browsers (now we don't even need the -webkit- prefix), and it will degrade nicely with legacy browsers such as IE6 - IE9.

We're done! For details please view the source code of demo2.html in the download package.