Animated Sticky Header + Navigation

Hallo guys.. Kali ini saya akan membagikan tutorial yg ciamik banget.. Top pokoknya..
Langsung aja..

Tambahkan link CSS berikut di atas </head>
Pastikan Blog sobat terpasang Jquery yg terbaru

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js">

Google Font

<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet"/>

Jquery Animated Sticky Header Markup

Kita akan membuat 2 menu yang berbeda. Yang pertama akan tetap dengan header dan akan terlihat menyatu dengan header dan menu itu sendiri.

<!-- [ Normal Navbar ] -->
<nav class="top">
<a href="/" class="logo">Dark Poseidon</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>

Ketika halaman di scroll, Normal Header akan digantikan oleh Sticky Header.

<!-- [ Sticky Navbar ] -->
<nav class="top fixed">
<a href="#" class="logo">D</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>

Styling

Pertama-tama kita akan melakukan beberapa perubahan dasar pada logo kita. Kita mempunyai 2 logo yg berbeda, logo untuk yang standard dan sticky header.

/* 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);
}

/* Fixed Navbar*/
.scrolled nav.top {
  -webkit-transform: translate3d(0, -70px, 0);
  transform: translate3d(0, -70px, 0);
}

.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;
}

nav .logo {
  color: #fff;
  float: left;
  font-family: "Lobster", cursive;
  font-size: 25px;
  height: 42px;
  margin: 20px 0 0 20px;
}

.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;
}

Style untuk menu

/* menu 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);
}

Menambahkan Fungsi JavaScript

<script type='text/javascript'>
//<![CDATA[
$( 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;
}
});
});
//]]>
</script>

Konfigurasi

Opsi	Keterangan
Nama Sobat	Ganti Dark Poseidon dengan nama blog anda
Link	Ganti # pada kode diatas dengan link yang sobat tuju

Result

See the Pen dNXwmo by Dedi Juniardi N (@dedijuniardi) on CodePen.

Dedi  Saturday, January 14, 2017 

Blogging CSS Jquery