Cara membuat tajuk situs web yang lengket

Diterbitkan: 2018-10-14

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

Elemen dengan fungsi ini sering disebut "lengket" karena melekat dan tetap terlihat saat pengguna berpindah melalui situs web. Saat pengguna pertama kali tiba di situs web, elemen akan berada di posisi awal, tetapi header 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 di 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 menelusuri situs web Anda. ”

Apa yang membuatnya lengket?

Pemosisian tetap adalah komponen kunci agar 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 secara langsung di situs 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 cara agar navigasi tetap di satu tempat?

Membuat navigasi lengket tidak bisa lebih mudah; itu baru saja selesai dengan gaya CSS. Pada dasarnya terlihat seperti ini:

.navbar-fixed-top {

position: fixed;

right: 0;

left: 0;

z-index: 999;

}

Tidak peduli berapa lama halaman Anda, atau berapa kali Anda menggulir ke atas dan ke bawah, navigasi akan "macet" ke bagian atas halaman. Kelas yang disebut .navbar-fixed-top telah ditambahkan ke navigasi yang membuat penempatan untuk navigasi. Saya menambahkan kelas ini ke tag nav. Posisi diatur ke tetap dan menambahkan pemosisian kiri dan kanan memastikan bahwa penempatannya benar dan memenuhi seluruh lebar 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, menciptakan kekacauan yang campur aduk.

Pertimbangan penting lainnya adalah indeks-z. Karena kita ingin navigasi selalu terlihat, kita perlu memastikannya 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 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 pada posisi tetap, itu akan menutupi sebagian konten di 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 tubuh di file CSS Anda:

body {

padding-top: 75px;

}

Ingatlah bahwa padding Anda mungkin lebih besar atau lebih kecil tergantung pada seberapa tebal header tetapnya.

Tidak dijual di tajuk situs yang lengket? Pelajari cara menambahkan tombol back-to-top yang melekat ke situs Anda.

Membuat header lengket menjadi licin

Adalah umum untuk menemukan tajuk yang menjadi lebih tipis ketika pengguna menggulir melewati titik tertentu, membuatnya terlihat licin. Ketika ukuran navigasi berkurang, 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 skrip AnimatedHeader

Untuk menambahkan tajuk animasi yang akan mengubah ukurannya pada gulir, ada solusi hebat dan ringan untuk membuat navigasi licin. Itu disebut Header Animasi. 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 menetapkan ketinggian 75px. Ini adalah ukuran "diperas".

.navbar-fixed-top {
position: fixed;
top: 0;
left: 0;
width: 100%;
background: #f6f6f6;
z-index: 999;
height: 90px;
overflow: hidden;
-webkit-transition: height 0.3s;
-moz-transition: height 0.3s;
transition: height 0.3s;
}

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

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

function scrollPage() {
var sy = scrollY();
if ( sy &amp;amp;amp;amp;amp;gt;= changeHeaderOn ) {
classie.add( header, 'cbp-af-header-shrink' );
}
else {
classie.remove( header, 'cbp-af-header-shrink' );
}
didScroll = false;
}

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

Opsi pemosisian lengket CSS

Ada juga opsi yang mungkin tidak terlalu merepotkan. Tergantung pada dukungan browser yang Anda rancang, position: sticky; membuat membuat header lengket sangat sederhana. Dukungan browser tidak buruk, tetapi juga tidak sepenuhnya global. Ketika Anda telah mendeklarasikan sticky, prefiks dapat digunakan. Lihat Dapatkah saya Gunakan untuk lebih jelasnya.

Cara sederhana untuk menggambarkan pemosisian tetap adalah bahwa ini adalah kombinasi pemosisian relatif dan pemosisian tetap. Saya kira Anda menemukan posisi lengket cukup sedikit. Kami berbicara tentang header di sini, tetapi ini juga berguna untuk elemen UI apa pun yang Anda ingin "lengket" saat pengguna menggulir. Mereka melihatnya menjadi "macet" ketika elemen mencapai jarak tertentu dari tepi viewport.

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

Menggunakan posisi: lengket

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

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

.navbar-fixed-top {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

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

Situasi luapan lengket yang harus diperhatikan

Kompatibilitas meluap

Itu bagus, tapi itu tidak sempurna. Ada beberapa batasan. Overflow terkadang bisa sedikit tidak terduga. Sebaiknya hindari jenis luapan tertentu pada elemen induk dengan sesuatu yang membutuhkan position: sticky . Mungkin ada masalah dengan overflow auto, scroll, atau hidden.

Dukungan browser terbatas

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

@supports(position:sticky){
  .header{
    position: -webkit-sticky;
    position: sticky;
    top: 0;
  }
}

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 sticky 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 header situs web yang lengket. Dengan beberapa JavaScript sederhana, navigasi tetap dapat ditingkatkan dengan menurunkan ketinggian, memberi pengguna lebih banyak ruang untuk melihat konten situs web.

Jangan coba ini di situs langsung Anda

Buat tajuk situs web yang lengket saat situs Anda ada di Lokal! Pelajari lebih lanjut dan unduh secara gratis di sini!

Artikel ini awalnya diterbitkan pada 2 Februari 2016. Terakhir diperbarui pada 14 Oktober 2018.