Membuat “Static to Fixed Element”

Jika anda membuka website 99U, coba perhatikan pada bagian navigasinya. Saat kita scrool ke bawah, maka navigasi yang pada awalnya mempunyai posisi static berubah menjadi fixed pada saat menyentuh bagian atas website. Bagaimana cara membuatnya??

1. Buat mark-up HTML anda

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/less.js/1.3.3/less.min.js"></script>
  <meta charset="utf-8">
  <title>Static to Fixed Element</title>
  <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
</head>
<body>
<header>
  <h1 id="branding" class="container">Welcome</h1>
  <nav>
    <ul class="container">
      <li><a href="#">Menu1</a></li>
      <li><a href="#">Menu2</a></li>
      <li><a href="#">Menu3</a></li>
      <li><a href="#">Menu4</a></li>
    </ul>
  </nav>
</header>
<section id="content" class="container">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nulla odio, congue elementum purus et, suscipit suscipit lorem. Quisque sed pellentesque libero, eu pretium lectus. Sed metus magna, ultrices vel adipiscing eget, condimentum at metus. Phasellus leo lacus, dignissim quis laoreet sed, ornare ut est. Aliquam faucibus eros ut felis ullamcorper blandit. Nam in nisl metus. Quisque malesuada feugiat velit, at blandit risus imperdiet ac. In tristique urna ut lorem placerat fermentum. Pellentesque vestibulum arcu rhoncus fermentum rutrum. Integer aliquam magna lacus, quis rhoncus tellus tincidunt vel.</p>
    .... ulangi 8-10 kali .....
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nulla odio, congue elementum purus et, suscipit suscipit lorem. Quisque sed pellentesque libero, eu pretium lectus. Sed metus magna, ultrices vel adipiscing eget, condimentum at metus. Phasellus leo lacus, dignissim quis laoreet sed, ornare ut est. Aliquam faucibus eros ut felis ullamcorper blandit. Nam in nisl metus. Quisque malesuada feugiat velit, at blandit risus imperdiet ac. In tristique urna ut lorem placerat fermentum. Pellentesque vestibulum arcu rhoncus fermentum rutrum. Integer aliquam magna lacus, quis rhoncus tellus tincidunt vel.</p>
</section>
<footer>
  <div class="container">
    <p id="copyright">&copy; 2014. sinar-soft.com</p>
  </div>
</footer>

 2. CSS style

note: saya menggunakan Lessjs. tutorial Lessjs dapat dibaca di http://lesscss.org/.

* {
  margin: 0;
  padding: 0;
  font-family: Open Sans, arial, sans-serif;
  font-weight: 400;
  color: #333;
}
.clearfix {
  content: " ";
  clear: both;
  display: block;
}
.container {
  max-width: 1170px;
  padding-left: 15px;
  padding-right: 15px;
  margin: 0 auto;
}
p {
  margin-bottom: 10px;
}
#branding {
  font-weight: 700;
  font-size: 49px;
  padding: 20px 20px 20px 50px;
}
nav {
  background: #333;
  ul {
	&:after {
	  .clearfix;
	}
	li {
	  list-style: none;
	  float: left;
	  a {
		text-decoration: none;
		display: block;
		color: #fff;
		text-transform: uppercase;
		padding: 20px;
	  }
	}
  }
  &.fixed {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
  }
}
#content {
  padding-top: 20px;
  padding-bottom: 20px;
}
footer {
  background: #333;
  padding: 20px 0;
  #copyright {
  	color: #fff;
  }
}

 3. Javascript

$(document).ready(function(){

  $(window).scroll(function(){
  
  // jika posisi scrollbar >= jarak nav dari atas maka:

  // else:

  });
})

Kita akan menyimpan jarak tag <nav> dan posisi scrollbar dari atas ke dalam sebuah variabel.

$(document).ready(function(){
  var top = $('nav').offset().top;
  $(window).scroll(function(){
    var y = $(window).scrollTop();
    // jika posisi scrollbar >= jarak nav dari atas maka:

    // else:

  });
})

Selanjutnya, jika  posisi scrollbar >= jarak nav dari atas maka, tag <nav> diberi class=”fixed”. Sebaliknya,  jika  posisi scrollbar < jarak nav dari atas maka, class=”fixed” di tag <nav> dihilangkan.

$(document).ready(function(){
  var top = $('nav').offset().top;
  $(window).scroll(function(){
    var y = $(window).scrollTop();
    if(y >= top) {
      $('nav').addClass('fixed');
    } else {
      $('nav').removeClass('fixed');
    }
  });
})

Mudah bukan?? Selamat Mencoba.

Source code komplit di http://jsbin.com/zelak/3

Leave a Reply

Your email address will not be published. Required fields are marked *