Membuat Header Sticky dengan CSS

Publish Date : 30-10-2023 , dibaca 21070 kali, Hari ini dibaca : 1 kali ,0 comments

Pada postingan kali ini kita akan membahas Cara Membuat Header Selalu tetap berada di atas, atau Membuat Header Sticky

Apa yang dimaksud dengan header Sticky ?

Mungkin temen-temen masih ada yang belum tahu apa yang dimaksud dengan header sticky , Header sticky adalah header yang selalu tetap berada pada bagian atas walaupun halaman website sudah kita scroll kebawah, dengan kata lain header sticky adalah header yang tetap.

Jika kita memperhatikan website-website sekarang , para desainer website sudah mulai menunjukkan imajinasinya, jika dulu para desainer mendesain web nya , hanya terdiri dari bagian Header, 2 sidebar , kemudian footer,dan bentuknya kotak, , namun sekarang sudah tidak lagi, anda bisa lihat bagaimana website-website sekarang dibuat dengan tampilan yang lebih menarik, gaya desain yang sangat berfariasi.

Ok... sudah mulai mengerti bukan..?Nah sekarang Mari kita masuk ke pembahasan selanjutnya.. oy tement-temen udah baca Membuat Layout dengan HTML5 dan CSS3,, kalo bleum dibaca juga ya

Cara Membuat Header Sticky dengan CSS

Mari kita mulai belajar bagaimana konsep dasar header sticky itu,, kenapa dasar.. ? ia.. karena imajinasi seseorang berbeda-beda, dan gaya desainnya juga beda, disini saya hanya menjelaskan cara membuat Header tetap walaupun scroll sudah digeser kebawah ( Header Sticky) .

Pada dasarnya, untuk membuat header sticky cukup mudah, disini fungsi css yang digunakan agar posisi header selalu tetap pada halaman website, kita menggunakan "position : fixed " , dengan mengatur letak posisi menjadi Fixed itu sudah memberikan perintah terhadap script untuk mengatur tampilan header selalu diatas ,

Contoh :

Untuk Code HTML

<html>
<head>
<title>Sticky Header using CSS</title>
</head>
<body>
<div class="sticky-header">Home | About | Contact</div>
<div class="content-scroll">
<p>Scrollable content with sticky header:</p>
<p>This example is for showing sticky header on page scroll.</p>
<p>CSS styles are used to control sticky header on scrolling.</p>
<p>It can be done by using some client'-side scripting languages.</p>
<p>For example, we can use jQuery library for obtaining ticky header.</p>
</div>
</body>
</html>

Simpan dengan nama index.html , dan kemudian tempatkan code css dibawah ini pada bagian atas tag </head>

Code CSS

<style>
.sticky-header {
background-color: #000;
color: #fff;
width:100%;
position: fixed;
top: 0;
left: 0;
margin: 0;
padding: 10px;
text-align:left;
letter-spacing: 3px;
}
.content-scroll{
height:1000px;
padding:100px 0px 0px 50px;
}
.content-scroll p{
height:50px;
}
</style>