Cara Membuat Sticky Header Sederhana Dengan HTML dan CSS

Salam semuanya, semoga sehat selalu. Kali ini saya ingin sharing kembali seputar blog dan memberikan panduan/tips dan trik mengenai Cara Membangun Sticky Header Sederhana dengan HTML dan CSS.



Dijaman yang modern ini pasti teman-teman telah amat mengenal mengenai blog dan diantara website-website tsb pasti teman-teman pernah melihat di bagian headernya tetap menempel diposisi dikala kita scroll kebawah. Nah begitulah yang disebut dengan sticky header (header menempel tetap diatas).



Bagaimana cara membuatnya ? ayoo mari kita mulai mempraktekannya. Pertama-tama-tama teman-teman bikin terlebih dahulu sebuah folder. Lalu kemudian jalankan/run text-editor yang teman-teman gunakan. Sekiranya telah 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= Kali ini saya ingin sharing kembali seputar blog dan memberikan panduan Cara Membangun Sticky Header Sederhana Dengan HTML dan CSS title=Cara Membangun Sticky Header Sederhana Dengan HTML dan CSS />
<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= Kali ini saya ingin sharing kembali seputar blog dan memberikan panduan Cara Membangun Sticky Header Sederhana Dengan HTML dan CSS title=Cara Membangun Sticky Header Sederhana Dengan HTML dan CSS />
<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= Kali ini saya ingin sharing kembali seputar blog dan memberikan panduan Cara Membangun Sticky Header Sederhana Dengan HTML dan CSS title=Cara Membangun Sticky Header Sederhana Dengan HTML dan CSS />
</head>
<body>
<header>
<h1>Sticky Header Sederhana</h1>
</header>
<article>
<h2>Source Code Aplikasi</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 aplikasi 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 aplikasi 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 aplikasi 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 aplikasi 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 aplikasi 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 aplikasi 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 aplikasi 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 aplikasi 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 aplikasi 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 aplikasi 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 aplikasi like Aldus PageMaker including versions of Lorem Ipsum.</p>
</article>
</body>
</html>


Sekiranya telah HTML dan CSS nya, langkah berikutnya 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= Kali ini saya ingin sharing kembali seputar blog dan memberikan panduan Cara Membangun Sticky Header Sederhana Dengan HTML dan CSS title=Cara Membangun Sticky Header Sederhana Dengan HTML dan CSS />
<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= Kali ini saya ingin sharing kembali seputar blog dan memberikan panduan Cara Membangun Sticky Header Sederhana Dengan HTML dan CSS title=Cara Membangun Sticky Header Sederhana Dengan HTML dan CSS />


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= Kali ini saya ingin sharing kembali seputar blog dan memberikan panduan Cara Membangun Sticky Header Sederhana Dengan HTML dan CSS title=Cara Membangun Sticky Header Sederhana Dengan HTML dan CSS />
<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= Kali ini saya ingin sharing kembali seputar blog dan memberikan panduan Cara Membangun Sticky Header Sederhana Dengan HTML dan CSS title=Cara Membangun Sticky Header Sederhana Dengan HTML dan CSS />
<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= Kali ini saya ingin sharing kembali seputar blog dan memberikan panduan Cara Membangun Sticky Header Sederhana Dengan HTML dan CSS title=Cara Membangun Sticky Header Sederhana Dengan HTML dan CSS />
</head>
<body>
<header>
<h1>Sticky Header Sederhana</h1>
</header>
<article>
<h2>Source Code Aplikasi</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 aplikasi 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 aplikasi 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 aplikasi 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 aplikasi 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 aplikasi 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 aplikasi 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 aplikasi 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 aplikasi 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 aplikasi 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 aplikasi 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 aplikasi like Aldus PageMaker including versions of Lorem Ipsum.</p>
</article>
</body>
</html>


Sekiranya telah seperti diatas, silahkan teman-teman simpan. Lalu coba jalankan/run dibrowser yang teman-teman gunakan. Sekiranya benar karenanya hasilnya akan sama seperti di gambar dibawah ini :



Kali



Dan bagi demo REAL nya silahkan klik disini > DEMO STICKY HEADER



Bagaimana teman-teman ? lumayan gampang bukan. Jadi seperti begitulah contoh sederhana mengenai Cara Membangun Sticky Header Sederhana Dengan HTML dan CSS.



Bagi pengembangan kedepannya silahkan teman-teman coba modifikasi sendiri dengan rujukan basic seperti diatas.



Oke kalau seperti itu lumayan sekianlah pembahasan kali ini mengenai Cara Membangun Sticky Header Sederhana Dengan HTML dan CSS. Semoga bermanfaat dan hingga bertemu dipembahasan berikutnya.



Terimakasih.




Sumber https://kursuswebsite.org

Popular posts from this blog

Cara Menghapus Isi Dari Form Input Menggunakan Javascript

Image
Salam hangat teman-teman, semoga teman-teman sehat selalu ya, Kali ini saya akan mencoba membagi Cara Menghapus Isi Dari Form Input Menggunakan Javascript. Terkadang di ketika kita menginput comment di suatu laman pasti pernah mengalami salah ketik atau ingin menghapus segala isian form yang telah kita isi. Nah, kini saya akan mencoba membangun tombol atau button bagi menghapus isinya sekaligus.
Read more

Membuat Form Menarik Menggunakan HTML dan CSS

Image
Halo sobat, apa kabar segala. Berjumpa lagi dengan saya di panduan Source Code Aplikasi , di artikel kali ini kita akan latihan Membuat Form Menarik  Menggunakan HTML dan CSS . Form yang akan kita bikin yaitu form yang benar-benar cantik khususnya para kaum hawa yang menyukai warna pink,
Read more