Cara Membuat Sticky Navigation (Fixed Position saat di scroll)

Desember 25, 2016 , , , 0 Comments


Selamat Sore, Pada postingan sebelumnya saya udah membahas tentang cara membuat template one page yang responsive. Kebanyakan template yang sekarang jika halaman di scroll ke bawah maka navbar akan melayang diatas halaman dan jika discroll lagi ke bawah maka navbar akan kembali ke posisi semula seperti pada gambar diatas, nah untuk membuatnya kita membutuhkan jquery yang akan menangani efek on scroll tersebut. pertama buat dulu htmlnya seperti berikut :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
  <title>Sticky Navigation</title>
  <link href="sticky.css" rel="stylesheet">
  <script src="js/jquery.js"></script>
  <script src="sticky.js"></script>
</head>
<body>
  <!-- Container -->
  <div class="container">

    <h1>Sample Header</h1>

      <!-- navigation -->
      <nav>
        <ul class="clearfix">
          <li><a href="#">Link 1</a></li>
          <li><a href="#">Link 2</a></li>
          <li><a href="#">Link 3</a></li>
          <li><a href="#">Link 4</a></li>
          <li><a href="#">Link 5</a></li>
        </ul>
      </nav>
      <!-- Content -->
      <div class="content">
        <br>
        <h2>Content Header</h2>
        <br>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <br>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <br>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <br>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </div>
</body>
</html>

Lalu CSS nya seperti berikut:

* {
  margin: 0;
  padding: 0;
}
.container {
  max-width: 80%;
  margin: 0 auto;
  padding: 0 20px;
  position: relative;
}
h1 {
  background-color: #305782;
  color: #fff;
  padding: 60px 25px;
  margin: 0;
}
nav {
  z-index: 100;
  background-color: #e7ecf2;
}
.nav-placeholder {
    margin: 0 0 40px 0;
    background: #e7ecf2;
}
.fixed {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: transparent;
}
.fixed .nav-inner {
  padding: 0 10%;
}
.fixed .nav-inner-most {
  max-width: 80%;
  margin: 0 auto;
  background-color: #e7ecf2;
}
nav ul {
  margin: 0;
  padding: 0;
}
.clearfix {
  width: 100%;
  background-color: #e7ecf2;
}
nav ul li {
  list-style: none;
  text-align: center;
  display: inline-block;
}
nav ul li a:link,
nav ul li a:visited {
  display: inline-block;
  text-decoration: none;
  padding: 10px 25px;
  background-color: #e7ecf2;
  border-right: 2px solid #d5dce4;
  color: #33557c;
  font-size: 90%;
  font-weight: bold;
}
.content {
  margin: 100px auto;
}

dan untuk javascriptnya seperti berikut :

jQuery(document).ready(function() {

  var navOffset = jQuery("nav").offset().top;

  jQuery("nav").wrap('<div class="nav-placeholder"></div>');
  jQuery(".nav-placeholder").height(jQuery("nav").outerHeight());

  jQuery("nav").wrapInner('<div class="nav-inner"></div>');
  jQuery("nav-inner").wrapInner('<div class="nav-inner-most"></div>');

  jQuery(window).scroll(function() {
    var scrollPos = jQuery(window).scrollTop();
    jQuery(".status").html(scrollPos);

    if (scrollPos >= navOffset) {
      jQuery("nav").addClass("fixed");
    }else{
      jQuery("nav").removeClass("fixed");
    }

  });
});

Ok Selamat mencoba. semoga bermanfaat.
Untuk membuat sticky navigation seperti ini bisa juga anda menggunakan plugin smint bisa anda download di http://www.outyear.co.uk/smint/

Juanas Smith Shared

Some say he’s half man half fish, others say he’s more of a seventy/thirty split. Either way he’s a fishy bastard.

0 komentar :

Langganan: Posting Komentar ( Atom )