Salam semuanya, semoga sehat selalu. Kali ini saya ingin sharing kembali seputar website dan memberikan tutorial/tips dan trik tentang Cara Membuat Sticky Header Sederhana dengan HTML dan CSS.
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).
Bagaimana cara membuatnya ? ayoo mari kita mulai mempraktekannya. Pertama-tama teman-teman 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 :
<html>
<head>
<meta charset="UTF-8">
<title>Sticky Header Sederhana HTML dan CSS</title>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22https%3A%2F%2Fcode.jquery.com%2Fjquery-2.2.4.min.js%22%20type%3D%22text%2Fjavascript%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cstyle%3E%0A%09*%7Bmargin%3A0%3B%20padding%3A0%3B%7D%0A%0Aheader%7B%0A%20%20position%3A%20fixed%3B%0A%20%20width%3A%20100%25%3B%0A%20%20text-align%3A%20left%3B%0A%20%20font-size%3A%2032px%3B%0A%20%20line-height%3A%20108px%3B%0A%20%20height%3A%20108px%3B%0A%20%20background%3A%20%23335C7D%3B%0A%20%20color%3A%20%23fff%3B%0A%20%20font-family%3A%20'PT%20Sans'%2C%20sans-serif%3B%0A%20%20transition%3A%20all%200.4s%20ease%3B%0A%7D%0Aheader.sticky%20%7B%0A%20%20font-size%3A%2024px%3B%0A%20%20line-height%3A%2048px%3B%0A%20%20height%3A%2048px%3B%0A%20%20background%3A%20rgba(45%2C193%2C118%2C%200.8)%3B%0A%20%20text-align%3A%20left%3B%0A%20%20padding-left%3A%2020px%3B%0A%20%20z-index%3A%2099%3B%0A%7D%0Aarticle%7B%0A%09width%3A%20950px%3B%0A%09margin%3A%20auto%3B%0A%09position%3A%20relative%3B%0A%09top%3A%20110px%3B%0A%7D%0A%0Aarticle%20p%20%7B%0A%09margin%3A20px%200%3B%0A%7D%0A%0A%09%3C%2Fstyle%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<style>" title="<style>" />
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%3E%0A%09%24(window).scroll(function()%20%7B%0A%09%09if%20(%24(this).scrollTop()%20%3E%201)%7B%20%20%0A%20%20%20%09%09%20%24('header').addClass(%22sticky%22)%3B%0A%20%20%09%7D%0A%20%20%09else%7B%0A%20%20%20%20%24('header').removeClass(%22sticky%22)%3B%0A%20%20%09%7D%0A%09%7D)%3B%0A%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
</head>
<body>
<header>
<h1>Sticky Header Sederhana</h1>
</header>
<article>
<h2>DUMETSCHOOL</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</article>
</body>
</html>
Jika sudah HTML dan CSS nya, langkah selanjutnya kita kasih sentuhan Jquery seperti dibawah ini :
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22https%3A%2F%2Fcode.jquery.com%2Fjquery-2.2.4.min.js%22%20type%3D%22text%2Fjavascript%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%3E%0A%24(window).scroll(function()%20%7B%0A%20%20%20if%20(%24(this).scrollTop()%20%3E%201)%7B%20%20%0A%20%20%20%09%24('header').addClass(%22sticky%22)%3B%0A%20%20%20%7D%0A%20%20%20else%7B%0A%20%20%20%20%24('header').removeClass(%22sticky%22)%3B%0A%20%20%7D%0A%7D)%3B%0A%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
Dan hasil dari ketiga script diatas akan menjadi seperti dibawah ini :
<html>
<head>
<meta charset="UTF-8">
<title>Sticky Header Sederhana HTML dan CSS</title>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22https%3A%2F%2Fcode.jquery.com%2Fjquery-2.2.4.min.js%22%20type%3D%22text%2Fjavascript%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cstyle%3E%0A%09*%7Bmargin%3A0%3B%20padding%3A0%3B%7D%0A%0Aheader%7B%0A%20%20position%3A%20fixed%3B%0A%20%20width%3A%20100%25%3B%0A%20%20text-align%3A%20left%3B%0A%20%20font-size%3A%2032px%3B%0A%20%20line-height%3A%20108px%3B%0A%20%20height%3A%20108px%3B%0A%20%20background%3A%20%23335C7D%3B%0A%20%20color%3A%20%23fff%3B%0A%20%20font-family%3A%20'PT%20Sans'%2C%20sans-serif%3B%0A%20%20transition%3A%20all%200.4s%20ease%3B%0A%7D%0Aheader.sticky%20%7B%0A%20%20font-size%3A%2024px%3B%0A%20%20line-height%3A%2048px%3B%0A%20%20height%3A%2048px%3B%0A%20%20background%3A%20rgba(45%2C193%2C118%2C%200.8)%3B%0A%20%20text-align%3A%20left%3B%0A%20%20padding-left%3A%2020px%3B%0A%20%20z-index%3A%2099%3B%0A%7D%0Aarticle%7B%0A%09width%3A%20950px%3B%0A%09margin%3A%20auto%3B%0A%09position%3A%20relative%3B%0A%09top%3A%20110px%3B%0A%7D%0A%0Aarticle%20p%20%7B%0A%09margin%3A20px%200%3B%0A%7D%0A%0A%09%3C%2Fstyle%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<style>" title="<style>" />
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%3E%0A%09%24(window).scroll(function()%20%7B%0A%09%09if%20(%24(this).scrollTop()%20%3E%201)%7B%20%20%0A%20%20%20%09%09%20%24('header').addClass(%22sticky%22)%3B%0A%20%20%09%7D%0A%20%20%09else%7B%0A%20%20%20%20%24('header').removeClass(%22sticky%22)%3B%0A%20%20%09%7D%0A%09%7D)%3B%0A%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
</head>
<body>
<header>
<h1>Sticky Header Sederhana</h1>
</header>
<article>
<h2>DUMETSCHOOL</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</article>
</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 pada gambar dibawah ini :
Dan untuk demo REAL nya silahkan klik disini > DEMO STICKY HEADER
Bagaimana teman-teman ? cukup mudah bukan. Jadi seperti itulah contoh sederhana tentang Cara Membuat Sticky Header Sederhana Dengan HTML dan CSS.
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 Sederhana Dengan HTML dan CSS. Semoga bermanfaat dan sampai bertemu dipembahasan selanjutnya.
Terimakasih.