Cara Membuat Animasi Sticky Header, Dengan CSS3 dan jQuery

Halo, ketemu lagi dengan saya :), Pada kesempatan kali ini saya akan berbagi tutorial nih, yaitu tutorial mengenai Cara Membuat Animasi Sticky Header, Dengan CSS3 dan jQuery, Penasaran bagaimana cara membuatnya ? Yuk langsung saja simak langkah-langkah nya berikut ini.1. Sebelum memulai silahkan siapkah satu buah gambar bebas untuk background nya.

2. Kalo sudah, buka teks editor nya masing-masing, kemudian ketikan kode HTML berikut:

<header><h1>Sticky Header</h1></header>
    
<img src="large-image.jpg" width="782" height="2000" alt="Big Image"/>

3. Pada bagian img silahkan masukan image yang sudah disiapkan tadi.

4. Setelah itu lanjutkan untuk kode CSS, silahkan ketikan kode CSS berikut:

     html, body, div, span, applet, 
		object, iframe,h1, h2, h3, h4, 
		h5, h6, p, blockquote, pre,a, 
		abbr, acronym, address, big, 
		cite, code,del, dfn, em, img, 
		ins, kbd, q, s, samp,small, 
		strike, strong, sub, sup, tt,
		var,b, u, i, center,dl, dt, 
		dd, ol, ul, li,fieldset, form, 
		label, legend,table, caption, 
		tbody, tfoot, thead, tr, th, 
		td,article, aside, canvas, 
		details, embed, figure, 
		figcaption, footer, header, 
		hgroup, menu, nav, output, 
		ruby, section, summary,time, 
		mark, audio, video {	
		 	margin: 0;	
			padding: 0;	
			border: 0;	
			font-size: 100%;	
			font: inherit;	
			vertical-align: 
			baseline;
		}/* HTML5 display-role reset for older browsers */
		article, aside, details, 
		figcaption, figure, 
		footer, header, hgroup, 
		menu, nav, section {display: block}
		body {line-height: 1;}
		ol, ul {list-style: none;}
		blockquote, q {	quotes: none;}
		blockquote:before, 
		blockquote:after,
		q:before, q:after {	content: '';	content: none;}
		table {	border-collapse: collapse;	border-spacing: 0;}
        header{
            text-align: center;
            font-size: 72px;
            line-height: 108px;
            height: 108px;
            background: #335C7D;
            color: #fff;
            font-family: 'PT Sans', sans-serif;
            
            // set animation
            -webkit-transition: all 0.4s ease;
            transition: all 0.4s ease;
        }
        
        header.sticky {
            position: fixed;
            font-size: 24px;
            line-height: 48px;
            height: 48px; 
            width: 100%;
            background: #efc47D;
            text-align: left;
            padding-left: 20px;
        }

5. Kalo sudah selanjutnya ketikan kode jQuery berikut ini:

<!-- import jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    
<script>
$(window).scroll(function() {
    if ($(this).scrollTop() > 1){  
        $('header').addClass("sticky");
    }
    else{
        $('header').removeClass("sticky");
    }
});
</script>

6. Kalo sudah semua, jangan lupa disimpan kemudian coba jalankan di browsernya masing-masing dan lihat hasil nya. Selesai

Cukup mudah yah ? Baiklah sampai disini tutorial mengenai Cara Membuat Animasi Sticky Header, Dengan CSS3 dan jQuery, Semoga bermanfaat, amin.

Sampai ketemu dilain kesempatan. Selamat mencoba 🙂