Creative Jquery Animated Sticky Header with Navigation Bar

Jquery Animated Sticky Header

We have another idea of building a creatively animated header using Jquery & CSS3. It will sticky the navigation bar and keep it hidden until scrolling the page down.

You may find such kind of example around the world on different websites. But you may can’t find the CSS Tutorial about building it.

The basic idea to make a big header with some nice background color and show the logo on to left whereas the navigation links on the top right side.

When a user scrolls the page down and at the certain amont of scrolling, The sticky bar along with logo & navigation come up to access the menu bar.

This navigation bar will be slim in height so it won’t take too much space and have a white background color.

Just make sure, Here I am not going to create a resizing animated header but it will a sticky menu bar which will only show when the user reaches a certain amount of scrolling.

The Markup

We will build two different sets of navigation. The first one will stay with the header, and it looks like the header and navigation is one.

You can say, the header will have navigation, but it will still seem like the entire header with menus.

<nav class="top">
<a href="#" class="logo">Codeconvey</a>
<ul>
  <li><a href="#">Design</a></li>
  <li><a href="#">Creative</a></li>
  <li><a href="#">Office</a></li>
  <li><a href="#">Dream</a></li>
</ul>
</nav>

When the user scrolls the page, the header navigation will stay, and sticky navigation will replace it.

<nav class="top fixed">
<a href="#" class="logo">C</a>
<ul>
  <ul>
   <li><a href="#">Design</a></li>
  <li><a href="#">Creative</a></li>
  <li><a href="#">Office</a></li>
  <li><a href="#">Dream</a></li>
  </ul>
</ul>
</nav>

The Styling

First of all, we will do some basic things for our logos. We have two different logos for standard and sticky header.

  
nav .logo {
    color: #fff;
    float: left;
    font-family: "Lobster",cursive;
    font-size: 25px;
    height: 42px;
    margin: 20px 0 0 20px;
    width: 141px;
}
.top.fixed > .logo {
    background: #0091de none repeat scroll 0 0;
    border-radius: 50%;
    color: #fff;
    float: left;
    font-family: "Lobster",cursive;
    font-size: 40px;
    height: 52px;
    margin: 10px 0 0 20px;
    padding: 0;
    text-align: center;
    width: 52px;
}

General Styling

We have some general styles for navigation like the styling of ul, li, and anchor link. There isn’t anything special here, just design the navigation look good.

  
/* general style */
nav.top ul {
  list-style-type: none;
  margin: 0 20px 0 0;
  padding: 0;
  float: right;
  line-height: 4.375rem;
}
nav.top ul li {
  display: inline-block;
}
nav.top ul li a {
  color: #fff;
  text-decoration: none;
  display: inline-block;
  font-size: .9375rem;
  font-weight: 700;
  margin-left: 9px;
  position: relative;
  cursor: pointer;
  line-height: 1em;
  padding: 8px 7px 9px;
  border-radius: 5px;
}
nav.top ul li a:hover {
  opacity: 1;
  background: rgba(0, 0, 0, 0.1);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
}

Normal Header

Here are styles of standard navbar that isn’t sticky but you should remember that you should make its position fixed with z-index: 99

Because we used the class.top for both navbars. We are not going to hide any header. We will just keep it behind each other.

  
/* normal navbar */
nav.top {
  position: fixed;
  top: 0;
  width: 100%;
  height: 70px;
  z-index: 99;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-transition: -webkit-transform 420ms cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: -webkit-transform 420ms cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: transform 420ms cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: transform 420ms cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-transform 420ms cubic-bezier(0.165, 0.84, 0.44, 1);
}
.scrolled nav.top {
  -webkit-transform: translate3d(0, -70px, 0);
  transform: translate3d(0, -70px, 0);
}

Fixed Header

For a fixed header, we will use the transform CSS property for animation. Also, we change the background color. You can also do more modification if you want.

  
/* fixed navbar*/
.top.fixed > ul {
  margin: 0 0px 0 0;
}
nav.top.fixed {
  -webkit-transform: translate3d(0, -80px, 0);
  transform: translate3d(0, -80px, 0);
  background: #fff;
  box-shadow: rgba(0, 0, 0, 0.09804) 0px 2px 4px;
}
.scrolled nav.top.fixed {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
nav.top.fixed ul a {
  color: #404B55;
}

The Javascript

The javascript isn’t long, and we used the scroll function to get this done.

  
$( document ).ready(function() {
var $body = $(document.body);
var _SCROLL_FIXED_CUTOFF = _SCROLL_FIXED_CUTOFF || ($(window).height() >= 825 ? 300 : 75),
  _HEADER_HEIGHT = _HEADER_HEIGHT || 825;

$(window).scroll(function(e) {
  if ($('nav.top[data-no-scroll]').length)
    return;
  if (this.pageYOffset >= _SCROLL_FIXED_CUTOFF && !$body.hasClass('scrolled')) {
    $body.addClass('scrolled');
  } else if (this.pageYOffset < _SCROLL_FIXED_CUTOFF && $body.hasClass('scrolled')) { $body.removeClass('scrolled'); } if (this.pageYOffset >= _HEADER_HEIGHT) {
    _header_carousel_active = false;
  } else {
    _header_carousel_active = true;
  }
});
});

Hope you find it great tutorial for building a different type of animated header.

Code ExamplesYou May Also Like