Shrink Header on Scroll Hanya Dengan CSS Tanpa Javascript

Shrink header atau mengecilkan header ini umumnya digunakan pada sticky header atau fixed header atau header melayang. Biasanya header-nya memiliki tinggi yang ketika melayang dianggap terlalu menghalangi area konten. Dengan shrink header maka ketika header melayang menjadi tidak terlalu menutupi area konten.
Umumnya shrink header ini dibuat dengan CSS dan Javascript, namun kali ini kita akan membuatnya hanya dengan CSS saja tanpa Javascript.
Di sini kita akan menggunakan trik seperti pada announcement bar dengan sticky header yang sebelumnya sudah saya posting.
Kita akan membuat header tampak tinggi sebelum halaman di-scroll dan menjadi lebih pendek ketika halaman di-scroll seperti animasi di bawah ini.

1. HTML Header

Buat susunan HTML untuk header seperti berikut ini.

<header class="header">

    .............

    .............

    .............

</header>

<div class="bottom-header"></div>

Perhatikan kode yang ditandai, itu adalah "fake header" atau header palsu untuk menambah ketinggian pada bagian bawah header ketika sebelum halaman digulirkan.

2. CSS Sticky Header

Kemudian kita membuat header menjadi sticky ketika di-scroll dengan CSS berikut.

.header {

    background: #033;

    padding: 20px 0 0;

    line-height: 55px;

    width: 100%;

    position: -webkit-sticky;

    position: sticky;

    top: -20px;

    margin: 0;

    z-index: 9999

}

Di sini kita membuat header dengan bagian atas lebih tinggi 20px dengan padding: 20px 0 0; (Anda bisa berkreasi dengan berbagai nilai) dan akan disembunyikan ketika sticky dengan top: -20px;
Kemudian kita membuat "fake header" dengan tinggi yang sama dengan tinggi bagian atas header dengan background yang sama dengan header sehingga header tampak seimbang bagian atas dan bawahnya sebelum di-scroll.

.bottom-head {

    width: 100%;

    height: 21px; /* Tinggi ditambah 1px */

    margin-top: -1px; /* Ditarik ke atas 1px agar tidak ada garis putih di antara header dan fake header */

    background: #033;

}

Fake header ini akan menghilang mengikuti scroll halaman.
Agar lebih jelas silahkan coba live demo berikut:

DEMO

Bagaimana, mudah bukan?
Selamat berkreasi dan kembangkan imajinasi Anda. Anda tidak akan pernah bisa jika tidak pernah mencoba.