contact

Contact Person
Pin BB : 5AB31960
SMS : 082288467823
WA : 081275371724
call : 081275668074


Membuat Header Sticky dengan CSS

Posted in HTML & CSS Life at 11 Maret 2016 With 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.



Membuat Header Sticky dengan CSS only

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>

Perhatikan code diatas, terdapat class ,.sticky-header {position:fixed},dimana itu mengetaur header agar selalu berada diatas

Untuk Lebih Jelasnya lagi silahkan lihat Demo dari Sticky Header dengan CSS

Demo

Gimana,,,? benar kan? Ok.. Demikianlah Cara Membuat sticky Header dengan CSS, Semoga artikel ini dapat berguna bagi temen-temen

Artikel Terkait

Diskusi