Halo semuanya, semoga sehat selalu. Kali ini saya ingin membahas tentang seputar pemrograman website dan serta memberikan tutorial/tips dan trik tentang Cara Membuat Sticky Header dengan Jquery.
Dijaman yang modern ini pasti teman-teman sudah sangat mengenal tentang website dan diantara website-website tsb pasti teman-teman pernah melihat pada bagian headernya tetap menempel diposisi saat kita scroll kebawah. Nah itulah yang disebut dengan sticky header (header menempel tetap diatas).
- Cara Membuat Sticky Header dengan Jquery
Bagaimana cara membuatnya ? mari kita mulai mempraktekannya. Pertama-tama buat terlebih dahulu sebuah folder. Lalu kemudian jalankan/run text-editor yang teman-teman gunakan. Jika sudah silahkan teman-teman copy/ketiklah script HTML seperti dibawah ini :
<header>
<h1>Sticky Header With Jquery</h1>
<nav>
<a href="">Home</a>
<a href="">About</a>
<a href="">Gallery</a>
<a href="">Contact</a>
</nav>
</header>
<div class="wrapper">
<section id='steezy'>
<h2> DUMET SCHOOL</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum enim sunt delectus, reiciendis omnis laudantium animi, et nulla quidem, aliquam aliquid. A consectetur deleniti voluptates eius neque, voluptate voluptatibus nostrum! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex libero cupiditate deserunt earum, fuga, ab labore esse animi, nihil est tenetur non delectus perferendis. Maxime accusamus ea rem sint at!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum enim sunt delectus, reiciendis omnis laudantium animi, et nulla quidem, aliquam aliquid. A consectetur deleniti voluptates eius neque, voluptate voluptatibus nostrum! Lorem ipsum dolor sit amet, consectetur adipisicing elit. A ut aspernatur omnis neque iusto. Veritatis rem ad atque optio perferendis. Dolorum qui consequatur, repellat soluta impedit porro totam molestiae sit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum enim sunt delectus, reiciendis omnis laudantium animi, et nulla quidem, aliquam aliquid. A consectetur deleniti voluptates eius neque, voluptate voluptatibus nostrum! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus iusto, omnis quas, rem minus cupiditate, sunt voluptates minima sint nemo ipsa itaque consequatur dolor, quam necessitatibus vitae. Quod, eaque, quam.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum enim sunt delectus, reiciendis omnis laudantium animi, et nulla quidem, aliquam aliquid. A consectetur deleniti voluptates eius neque, voluptate voluptatibus nostrum!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum enim sunt delectus, reiciendis omnis laudantium animi, et nulla quidem, aliquam aliquid. A consectetur deleniti voluptates eius neque, voluptate voluptatibus nostrum!</p>
</section>
<section id='real'>
<h2> TERBAIK DAN NOMOR 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum enim sunt delectus, reiciendis omnis laudantium animi, et nulla quidem, aliquam aliquid. A consectetur deleniti voluptates eius neque, voluptate voluptatibus nostrum!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum enim sunt delectus, reiciendis omnis laudantium animi, et nulla quidem, aliquam aliquid. A consectetur deleniti voluptates eius neque, voluptate voluptatibus nostrum!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum enim sunt delectus, reiciendis omnis laudantium animi, et nulla quidem, aliquam aliquid. A consectetur deleniti voluptates eius neque, voluptate voluptatibus nostrum!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum enim sunt delectus, reiciendis omnis laudantium animi, et nulla quidem, aliquam aliquid. A consectetur deleniti voluptates eius neque, voluptate voluptatibus nostrum!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum enim sunt delectus, reiciendis omnis laudantium animi, et nulla quidem, aliquam aliquid. A consectetur deleniti voluptates eius neque, voluptate voluptatibus nostrum!</p>
</section>
<section id='big'>
<h2>WEB MASTER</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum enim sunt delectus, reiciendis omnis laudantium animi, et nulla quidem, aliquam aliquid. A consectetur deleniti voluptates eius neque, voluptate voluptatibus nostrum!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum enim sunt delectus, reiciendis omnis laudantium animi, et nulla quidem, aliquam aliquid. A consectetur deleniti voluptates eius neque, voluptate voluptatibus nostrum!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum enim sunt delectus, reiciendis omnis laudantium animi, et nulla quidem, aliquam aliquid. A consectetur deleniti voluptates eius neque, voluptate voluptatibus nostrum!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum enim sunt delectus, reiciendis omnis laudantium animi, et nulla quidem, aliquam aliquid. A consectetur deleniti voluptates eius neque, voluptate voluptatibus nostrum!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum enim sunt delectus, reiciendis omnis laudantium animi, et nulla quidem, aliquam aliquid. A consectetur deleniti voluptates eius neque, voluptate voluptatibus nostrum!</p>
</section>
</div>
Jika sudah, lanjut ke sentuhan selanjutnya teman-teman ketik/copy kembali script CSS seperti dibawah ini :
<style>
* {
margin: 0;
padding: 0;
border: 0;
font: inherit;
font-size: 100%;
vertical-align: baseline;
}
html {
line-height: 1;
}
ol, ul {
list-style: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
vertical-align: middle;
}
q, blockquote {
quotes: none;
}
q:before, q:after, blockquote:before, blockquote:after {
content: "";
content: none;
}
a img {
border: none;
}
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
display: block;
}
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
background-color: #ecf0f1;
font-family: helvetica, arial, sans-serif;
font-size: 16px;
padding-top: 330px;
-moz-transition: padding-top 0.5s ease;
-o-transition: padding-top 0.5s ease;
-webkit-transition: padding-top 0.5s ease;
transition: padding-top 0.5s ease;
}
header {
width: 100%;
height: 300px;
background-color: #3498db;
text-align: center;
position: relative;
position: fixed;
top: 0;
overflow: hidden;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
}
header h1 {
font-size: 42px;
color: #fff;
line-height: 230px;
text-transform: uppercase;
font-weight: 100;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
}
header nav {
position: absolute;
bottom: 0;
height: 60px;
line-height: 60px;
width: 100%;
background-color: rgba(0, 0, 0, 0.1);
}
header nav a {
color: #fff;
display: inline-block;
padding: 10px 15px;
line-height: 1;
text-decoration: none;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
}
header nav a:hover {
-moz-box-shadow: 0 0 0 1px #fff;
-webkit-box-shadow: 0 0 0 1px #fff;
box-shadow: 0 0 0 1px #fff;
}
h2 {
font-size: 34px;
text-transform: uppercase;
font-weight: 100;
line-height: 2;
color: #2c3e50;
}
p {
margin-bottom: 2rem;
line-height: 2;
color: #7f8c8d;
}
.wrapper {
width: 800px;
margin: 0 auto;
}
section {
padding: 20px;
margin-bottom: 40px;
background-color: #fff;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
-moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
}
/* Sticky Header Style */
/* ---------------------------------------- */
body.sticky-header {
padding-top: 100px;
}
body.sticky-header header {
height: 60px;
background-color: rgba(52, 152, 219, 0.9);
}
body.sticky-header header h1 {
-moz-transform: scale(0, 0);
-ms-transform: scale(0, 0);
-webkit-transform: scale(0, 0);
transform: scale(0, 0);
}
</style>
Jika sudah HTML dan CSS nya, langkah selanjutnya kita kasih sentuhan Jquery seperti dibawah ini :
<script src="https://code.jquery.com/jquery-2.2.4.min.js" type="text/javascript"></script>
<script>
$(function(){
$(window).scroll(function(){
var winTop = $(window).scrollTop();
if(winTop >= 30){
$("body").addClass("sticky-header");
}else{
$("body").removeClass("sticky-header");
}//if-else
});//win func.
});//ready func.
</script>
Dan hasil dari ketiga script diatas akan menjadi seperti dibawah ini :
<html>
<head>
<meta charset="UTF-8">
<title>Sticky Header Jquery</title>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" type="text/javascript"></script>
<style>
* {
margin: 0;
padding: 0;
border: 0;
font: inherit;
font-size: 100%;
vertical-align: baseline;
}
html {
line-height: 1;
}
ol, ul {
list-style: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
vertical-align: middle;
}
q, blockquote {
quotes: none;
}
q:before, q:after, blockquote:before, blockquote:after {
content: "";
content: none;
}
a img {
border: none;
}
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
display: block;
}
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
background-color: #ecf0f1;
font-family: helvetica, arial, sans-serif;
font-size: 16px;
padding-top: 330px;
-moz-transition: padding-top 0.5s ease;
-o-transition: padding-top 0.5s ease;
-webkit-transition: padding-top 0.5s ease;
transition: padding-top 0.5s ease;
}
header {
width: 100%;
height: 300px;
background-color: #3498db;
text-align: center;
position: relative;
position: fixed;
top: 0;
overflow: hidden;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
}
header h1 {
font-size: 42px;
color: #fff;
line-height: 230px;
text-transform: uppercase;
font-weight: 100;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
}
header nav {
position: absolute;
bottom: 0;
height: 60px;
line-height: 60px;
width: 100%;
background-color: rgba(0, 0, 0, 0.1);
}
header nav a {
color: #fff;
display: inline-block;
padding: 10px 15px;
line-height: 1;
text-decoration: none;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
}
header nav a:hover {
-moz-box-shadow: 0 0 0 1px #fff;
-webkit-box-shadow: 0 0 0 1px #fff;
box-shadow: 0 0 0 1px #fff;
}
h2 {
font-size: 34px;
text-transform: uppercase;
font-weight: 100;
line-height: 2;
color: #2c3e50;
}
p {
margin-bottom: 2rem;
line-height: 2;
color: #7f8c8d;
}
.wrapper {
width: 800px;
margin: 0 auto;
}
section {
padding: 20px;
margin-bottom: 40px;
background-color: #fff;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
-moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
}
/* Sticky Header Style */
/* ---------------------------------------- */
body.sticky-header {
padding-top: 100px;
}
body.sticky-header header {
height: 60px;
background-color: rgba(52, 152, 219, 0.9);
}
body.sticky-header header h1 {
-moz-transform: scale(0, 0);
-ms-transform: scale(0, 0);
-webkit-transform: scale(0, 0);
transform: scale(0, 0);
}
</style>
<script>
$(function(){
$(window).scroll(function(){
var winTop = $(window).scrollTop();
if(winTop >= 30){
$("body").addClass("sticky-header");
}else{
$("body").removeClass("sticky-header");
}//if-else
});//win func.
});//ready func.
</script>
</head>
<body>
<header>
<h1>Sticky Header With Jquery</h1>
<nav>
<a href="">Home</a>
<a href="">About</a>
<a href="">Gallery</a>
<a href="">Contact</a>
</nav>
</header>
<div class="wrapper">
<section id='steezy'>
<h2> DUMET SCHOOL</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum enim sunt delectus, reiciendis omnis laudantium animi, et nulla quidem, aliquam aliquid. A consectetur deleniti voluptates eius neque, voluptate voluptatibus nostrum! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex libero cupiditate deserunt earum, fuga, ab labore esse animi, nihil est tenetur non delectus perferendis. Maxime accusamus ea rem sint at!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum enim sunt delectus, reiciendis omnis laudantium animi, et nulla quidem, aliquam aliquid. A consectetur deleniti voluptates eius neque, voluptate voluptatibus nostrum! Lorem ipsum dolor sit amet, consectetur adipisicing elit. A ut aspernatur omnis neque iusto. Veritatis rem ad atque optio perferendis. Dolorum qui consequatur, repellat soluta impedit porro totam molestiae sit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum enim sunt delectus, reiciendis omnis laudantium animi, et nulla quidem, aliquam aliquid. A consectetur deleniti voluptates eius neque, voluptate voluptatibus nostrum! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus iusto, omnis quas, rem minus cupiditate, sunt voluptates minima sint nemo ipsa itaque consequatur dolor, quam necessitatibus vitae. Quod, eaque, quam.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum enim sunt delectus, reiciendis omnis laudantium animi, et nulla quidem, aliquam aliquid. A consectetur deleniti voluptates eius neque, voluptate voluptatibus nostrum!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum enim sunt delectus, reiciendis omnis laudantium animi, et nulla quidem, aliquam aliquid. A consectetur deleniti voluptates eius neque, voluptate voluptatibus nostrum!</p>
</section>
<section id='real'>
<h2> TERBAIK DAN NOMOR 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum enim sunt delectus, reiciendis omnis laudantium animi, et nulla quidem, aliquam aliquid. A consectetur deleniti voluptates eius neque, voluptate voluptatibus nostrum!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum enim sunt delectus, reiciendis omnis laudantium animi, et nulla quidem, aliquam aliquid. A consectetur deleniti voluptates eius neque, voluptate voluptatibus nostrum!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum enim sunt delectus, reiciendis omnis laudantium animi, et nulla quidem, aliquam aliquid. A consectetur deleniti voluptates eius neque, voluptate voluptatibus nostrum!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum enim sunt delectus, reiciendis omnis laudantium animi, et nulla quidem, aliquam aliquid. A consectetur deleniti voluptates eius neque, voluptate voluptatibus nostrum!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum enim sunt delectus, reiciendis omnis laudantium animi, et nulla quidem, aliquam aliquid. A consectetur deleniti voluptates eius neque, voluptate voluptatibus nostrum!</p>
</section>
<section id='big'>
<h2>WEB MASTER</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum enim sunt delectus, reiciendis omnis laudantium animi, et nulla quidem, aliquam aliquid. A consectetur deleniti voluptates eius neque, voluptate voluptatibus nostrum!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum enim sunt delectus, reiciendis omnis laudantium animi, et nulla quidem, aliquam aliquid. A consectetur deleniti voluptates eius neque, voluptate voluptatibus nostrum!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum enim sunt delectus, reiciendis omnis laudantium animi, et nulla quidem, aliquam aliquid. A consectetur deleniti voluptates eius neque, voluptate voluptatibus nostrum!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum enim sunt delectus, reiciendis omnis laudantium animi, et nulla quidem, aliquam aliquid. A consectetur deleniti voluptates eius neque, voluptate voluptatibus nostrum!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum enim sunt delectus, reiciendis omnis laudantium animi, et nulla quidem, aliquam aliquid. A consectetur deleniti voluptates eius neque, voluptate voluptatibus nostrum!</p>
</section>
</div>
</body>
</html>
Jika sudah seperti diatas, silahkan teman-teman simpan. Lalu coba jalankan/run dibrowser yang teman-teman gunakan. Jika benar maka hasilnya akan sama seperti dibawah ini
demonya silahkan klik disini > DEMO STICKY HEADER
Bagaimana teman-teman ? cukup mudah bukan. Jadi seperti itulah contoh sederhana tentang Cara Membuat Sticky Header Dengan Jquery.
Untuk pengembangan kedepannya silahkan teman-teman coba modifikasi sendiri dengan acuan dasar seperti diatas.
Oke kalau begitu cukup sekian pembahasan kali ini tentang Cara Membuat Sticky Header Dengan Jquery. Semoga bermanfaat dan sampai bertemu dipembahasan selanjutnya.
Terimakasih.
Â