Cara Membuat Tajuk Situs Web yang Lengket

Header situs web yang tetap ada saat pengguna menggulir telah menjadi elemen desain yang sangat populer. Mereka memungkinkan pengguna untuk mengakses navigasi dengan mudah tanpa perlu menggulir ke atas setiap kali mereka ingin memilih halaman atau opsi yang berbeda.

Elemen dengan fungsi ini sering disebut "lengket" karena melekat pada pengguna, tetap terlihat saat berpindah melalui situs web. Saat pengguna pertama kali membuka situs web, elemen akan berada di posisi awal, tetapi tajuk lengket akan tetap berada di tempat yang sama.

Karena navigasi adalah salah satu elemen terpenting dari sebuah situs web, mengambil pendekatan ini membantu membuat navigasi lebih mudah diakses. Memiliki navigasi yang tetap pada tempatnya memungkinkan aliran yang mudah bagi pengguna saat mereka menelusuri konten situs web, yang sangat penting.

Elemen navigasi yang melekat membantu menciptakan aliran pengguna yang mudah saat orang-orang menelusuri situs web Anda.

Apa yang Membuatnya Lengket?

Pemosisian tetap adalah komponen kunci untuk membuat navigasi tetap di tempatnya. Elemen posisi tetap ini diposisikan relatif terhadap viewport, atau jendela browser itu sendiri. Karena area pandang tidak berubah saat situs digulir, elemen dengan posisi tetap ini akan tetap berada di tempat yang sama saat halaman digulir.

Catatan: Jangan Coba Ini di Situs Langsung Anda

Ingat: Anda tidak boleh mengubah kode langsung di situs aktif Anda untuk memastikan tidak ada yang rusak. Aplikasi pengembangan lokal gratis kami, Lokal, akan membantu Anda menyiapkan lingkungan pengujian tempat Anda dapat mengikuti tutorial ini dengan aman.

Bagaimana Kita Membuat Navigasi Tetap di Satu Tempat?

Membuat navigasi lengket sangat mudah; itu hanya dilakukan dengan gaya CSS. Ini pada dasarnya terlihat seperti ini:

 [css]

.navbar-fixed-top {

posisi: tetap;

kanan: 0;

kiri: 0;

indeks-z: 999;

}

[/css]

Tidak peduli berapa lama halaman Anda, atau berapa kali Anda menggulir ke atas dan ke bawah, nav akan "macet" di bagian atas halaman. Kelas bernama .navbar-fixed-top telah ditambahkan ke navigasi yang membuat penempatan navigasi. Saya menambahkan kelas ini ke tag nav. Posisi diatur ke tetap dan menambahkan posisi kiri dan kanan memastikan bahwa penempatannya benar dan memenuhi lebar penuh halaman.

Perlu diingat, setiap kali kelas ini diterapkan, itu akan membuat posisi elemen tetap. Kemungkinan besar kelas ini hanya akan diterapkan sekali, jika tidak, akan ada beberapa elemen halaman yang berperilaku sama di tempat yang sama, membuat kekacauan yang campur aduk.

Pertimbangan penting lainnya adalah z-index. Karena kita ingin navigasi selalu terlihat, kita perlu memastikan itu tidak tumpang tindih dengan elemen lain. Saat kita mereferensikan z-index , kita berbicara tentang properti CSS yang menetapkan urutan tumpukan elemen tertentu. Elemen dengan urutan tumpukan lebih besar selalu berada di depan elemen lain dengan urutan tumpukan lebih rendah. Nilai 999 adalah angka yang besar, menjadikannya taruhan yang aman untuk navigasi.

Sesuaikan Badan Halaman

Karena navigasi sekarang berada pada posisi tetap, itu akan mencakup sebagian konten di bagian atas. Ada perbaikan sederhana untuk ini. Menambahkan padding ke bagian atas badan akan mendorong halaman ke bawah sehingga konten di bagian atas tidak akan tercakup oleh header saat pengguna tiba di halaman.
Anda dapat menambahkan padding ke badan di file CSS Anda:

 [css]

tubuh {

padding-top: 75px;

}

[/css]

Perlu diingat bahwa padding Anda mungkin lebih besar atau lebih kecil tergantung seberapa tebal header tetapnya.

Membuat Sticky Header Squishy

Sangat umum untuk menemukan tajuk yang menjadi lebih tipis saat pengguna menggulir melewati titik tertentu, membuatnya terlihat licin. Saat ukuran navigasi mengecil, ini membantu memberi pengguna lebih banyak ruang untuk melihat konten situs web utama. Ini sangat membantu pada perangkat yang lebih kecil. Kami akan menggunakan kombinasi CSS dan JavaScript untuk mewujudkannya.

Navigasi Licin dengan AnimatedHeader Script

Untuk menambahkan tajuk animasi yang akan mengubah ukurannya saat menggulir, ada solusi hebat dan ringan untuk membuat navigasi mulus. Ini disebut AnimatedHeader. Ini memiliki lisensi MIT, sehingga dapat digunakan untuk proyek pribadi atau komersial. Untuk mendapatkan file-file ini, lihat AnimatedHeader di GitHub.

CSS dasar untuk navigasi

Mari kita lihat dua gaya CSS yang penting. Yang pertama mungkin terlihat familier bagi Anda, .navbar-fixed-top yang menentukan tinggi, lebar, dan posisi tetap kami untuk navigasi lengket. Di bawah, Anda dapat melihat ada kelas lain yang ditambahkan yang menentukan ketinggian 75px. Ini adalah ukuran "terjepit".

 [css]

.navbar-fixed-top {
posisi: tetap;
atas: 0;
kiri: 0;
lebar: 100%;
latar belakang: #f6f6f6;
indeks-z: 999;
tinggi: 90px;
luapan: tersembunyi;
-webkit-transisi: tinggi 0,3 detik;
-moz-transisi: tinggi 0,3 detik;
transisi: tinggi 0,3 detik;
}

.navbar-fixed-top.cbp-af-header-shrink {
tinggi: 75px;
}

[/css]

Untuk mengubah ukuran, JavaScript digunakan untuk menambahkan kelas .cpb-af-header-shrink . Mari kita lihat bagian skrip yang membuat hal ini terjadi:

 [javascript]

fungsi scrollPage() {
var sy = scrollY();
if ( sy >= changeHeaderOn ) {
classie.add( tajuk, 'cbp-af-header-shrink' );
}
kalau tidak {
classie.remove( tajuk, 'cbp-af-header-shrink' );
}
didScroll = salah;
}

[/javascript]

Sekadar mengingatkan, ada lebih banyak skrip, jadi pastikan untuk mengunduh kode sumber sehingga Anda memiliki semua komponennya. Seperti yang Anda lihat, setelah pengguna menggulir melewati titik tertentu, kelas .cpb-af-header-shrink ditambahkan. Jika pengguna menggulir kembali halaman, kelas ini akan dihapus.

Opsi Pemosisian Lengket CSS

Ada juga opsi yang mungkin tidak terlalu merepotkan. Bergantung pada dukungan browser yang Anda rancang, position: sticky; membuat pembuatan tajuk lengket menjadi sangat sederhana. Dukungan browser tidak buruk, tetapi juga tidak sepenuhnya global. Ketika Anda telah mendeklarasikan sticky, prefiks dapat digunakan. Lihat Dapatkah saya Menggunakan untuk detail lebih lanjut.

Cara sederhana untuk mendeskripsikan sticky positioning adalah kombinasi antara relative dan fixed positioning. Saya kira Anda sering menemukan posisi yang lengket. Kita berbicara tentang header di sini, tetapi ini juga berguna untuk elemen UI apa pun yang ingin Anda "lengket" saat pengguna menggulir. Mereka melihatnya "macet" saat elemen mencapai jarak tertentu dari tepi viewport.

Elemen diperlakukan sebagai posisi relatif hingga mencapai titik tertentu dan kemudian "diperbaiki". Poin ini dideklarasikan dengan menggunakan CSS. "Titik" pada dasarnya adalah saat Anda menentukan atas, bawah, kiri, atau kanan, seperti yang Anda lakukan dengan pemosisian absolut. Anda perlu menentukan agar elemen tersebut memiliki sesuatu untuk "ditempel".

Menggunakan Posisi: Lengket

Ini cukup mudah digunakan. Beberapa deklarasi CSS dan saya dapat memiliki tajuk yang lengket. Berikut adalah tiga langkah sederhana:

1. Temukan gaya yang tepat sehingga Anda dapat mendeklarasikan elemen sebagai sticky menggunakan position:sticky; (jangan lupa awalan browser seperti position: -webkit-sticky; ).
2. Pilih "tepi lengket" (atas, kanan, bawah, atau kiri) untuk item yang akan "ditempel".
3. Deklarasikan jarak dari "tepi lengket", yaitu 10px untuk header yang menjadi lengket saat berjarak 10px dari area gulir.

 [css]

.navbar-fixed-top {
  posisi: -webkit-lengket;
  posisi: lengket;
  atas: 0;
}

[/css] 

Saya tidak ingin ada ruang antara sticky header dan viewport, jadi 0 piksel dari atas. Anda dapat melihat contoh ini di Codepen.

Waspadai Situasi Luapan Lengket Ini

Kompatibilitas luapan

Itu bagus, tapi itu tidak sempurna. Ada beberapa batasan. Overflow kadang-kadang bisa sedikit tidak terduga. Yang terbaik adalah menghindari jenis luapan tertentu pada elemen induk dengan sesuatu yang membutuhkan position: sticky . Mungkin ada masalah dengan luapan otomatis, gulir, atau tersembunyi.

Dukungan browser terbatas

Dukungan browser terbatas, jadi menggunakan aturan supports untuk mendeteksi apakah browser saat ini mendukung posisi lengket adalah pilihan. Itu terlihat seperti:

 [css]

@dukungan(posisi:lengket){
  .tajuk{
    posisi: -webkit-lengket;
    posisi: lengket;
    atas: 0;
  }
}

[/css]

Penting untuk dipikirkan apakah posisi lengket benar-benar diperlukan. Jika ya, pendekatan penentuan posisi tetap dapat digunakan. Jika tidak mutlak diperlukan, atau dukungan browser tidak menjadi perhatian, pendekatan lengket lebih mudah diterapkan.

Ini mungkin tampak rumit pada awalnya, tetapi tidak ada alasan untuk terjebak dalam kebiasaan navigasi; itu relatif sederhana untuk membuat navigasi Anda lengket dan licin. Dengan beberapa pemosisian tetap CSS sederhana, Anda dapat dengan mudah membuat tajuk situs web yang lengket. Dengan beberapa JavaScript sederhana, navigasi tetap dapat ditingkatkan dengan memperkecil ketinggian, memberi pengguna lebih banyak ruang untuk melihat konten situs web.

Jangan coba ini di situs langsung Anda

Buat tajuk situs web lengket untuk situs yang dihosting WP Engine Anda di Lokal! Pelajari lebih lanjut dan unduh secara gratis di sini!