Animated Sticky Header On Scroll dengan CSS3 & JavaScript
Dalam posting ini, saya akan menunjukkan kepada Anda bagaimana Anda dapat membuat tajuk lengket animasi dengan mudah pada gulungan yang dibangun dengan CSS3 dan JavaScript saja. Anda tidak perlu mendaftar ke layanan pihak ketiga atau jQuery.
Anda telah melihat banyak tajuk atau desain navigasi yang berbeda yang tetap berada di bagian atas halaman dan dianimasikan pada gulungan tetapi contoh seperti itu hanya mungkin dilakukan dengan CSS & jQuery.
Tapi bagaimana kalau membuat jenis tajuk yang serupa dengan bantuan CSS & JavaScript?
Dalam tutorial kami sebelumnya, saya membuat contoh bagus dari header On-Scroll Animated yang mengubah ukuran dan secara otomatis menyesuaikan berbagai elemen pada header.
Tetapi di sini kami tidak akan mengubah ukuran bagian navigasi apa pun. Kami akan membuat bagian header besar yang akan memiliki beberapa informasi penting yang ingin Anda tunjukkan kepada pengunjung situs Anda.
Ketika pengguna menggulir ke bawah halaman, bagian header akan bersembunyi dengan animasi yang halus kemudian bilah navigasi akan naik dan diperbaiki di bagian atas halaman.
Bilah navigasi akan tetap di atas sampai pengguna menggulir ke bawah semua halaman. Saat pengguna kembali ke bagian atas halaman, mereka dapat melihat seluruh header besar dan navigasi di bawahnya.
Mulailah dengan Animated Sticky Header On Scroll
Pertama mari kita lihat Markup, dan kita mulai dengan HTML. Sederhana saja, yang kita butuhkan hanyalah a header tag dan tempat h1 di dalam header. Begitu pula di dalam nav tag, kami memiliki tautan navigasi.
<header> <h1>Sticky Header</h1> <nav> <a href="">Home</a> <a href="">About</a> <a href="">Gallery</a> <a href="">Contact</a> </nav> </header>
Di bawah bagian header, kami memiliki pembungkus untuk konten lainnya. Kami menentukan bagian untuk setiap kumpulan konten blok tempat Anda dapat menempatkan konten.
<div class="wrapper"> <section id='steezy'>...</section> <section id='real'>....</section> <section id='big'>....</section> </div>
Terapkan Gaya CSS3
Kami telah memberi style pada body dan menambahkan padding-top sesuai dengan ukuran header kami. Dalam kasus kami, kami memiliki 200px padding-top karena kami memiliki ukuran header 200px. Anda dapat mengatur kustom properti bantalan sesuai kebutuhan.
body { background-color: #ecf0f1; font-family: helvetica, arial, sans-serif; font-size: 16px; padding-top: 200px; margin:0; -moz-transition: padding-top 0.5s ease; -o-transition: padding-top 0.5s ease; -webkit-transition: padding-top 0.5s ease; transition: padding-top 0.5s ease; } Seperti yang Anda lihat, kami telah menyetel tinggi ke 200px. Jika Anda mengubah ketinggian ini, Anda juga perlu berhati-hati padding-top untuk tubuh.
Untuk tajuk, Kami juga menggunakan transisi yang mirip dengan tubuh.
header { background-color: #7aa464; height: 200px; overflow: hidden; position: fixed; text-align: center; top: 0; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; -webkit-transition: all 0.5s ease; width: 100%; } Untuk lengket, kami mengubah padding-top dalam hal ini karena pada posisi sticky, kita akan memiliki tinggi header yang lebih kecil. Kami juga memodifikasi tinggi menjadi 60px untuk menjaga header lebih kecil.
Pada posisi sticky kita tidak perlu menampilkan logo header, jadi kita perlu menyembunyikannya dengan menggunakan properti CSS3 skala transformasi.
body.sticky-header { padding-top: 100px; } body.sticky-header header { height: 60px; background-color: #7aa464; } body.sticky-header header h1 { -moz-transform: scale(0, 0); -ms-transform: scale(0, 0); -webkit-transform: scale(0, 0); transform: scale(0, 0); } JavaScript
Kami menggunakan fungsi JavaScript sederhana untuk menangani tongkat. Fungsi tersebut akan melakukan dua hal. Pertama, ini akan memungkinkan kita untuk mengatur posisi gulir dan kedua, memungkinkan untuk menambah atau menghapus header-lengket ke badan.
$( document ).ready(function() { $(window).scroll(function(){ var winTop = $(window).scrollTop(); if(winTop >= 30){ $("body").addClass("sticky-header"); }else{ $("body").removeClass("sticky-header"); }//if-else });//win func. });//ready func. Jangan lupa masukkan main jQuery (perpustakaan JavaScript) mengajukan ke dalam proyek Anda.