Situs web modern sering menampilkan pengguliran yang luas. Halaman panjang adalah umum di perangkat desktop, tetapi bahkan lebih sering di layar seluler. Praktik ini menciptakan tantangan kegunaan untuk tugas -tugas seperti navigasi dan merujuk informasi penting.
Di situlah elemen desain “lengket” berguna. Mereka memungkinkan pengguna untuk menggulir tanpa kehilangan akses ke menu situs Anda. Anda juga dapat menggunakannya untuk menjaga iklan tetap terlihat, melampirkan tombol berbagi media sosial ke viewport, atau membuat efek khusus yang menyenangkan.
Menerapkan elemen lengket bisa sederhana, karena CSS memiliki khusus Posisi properti untuk fungsi ini. JavaScript dapat digunakan untuk membangun fitur yang lebih kuat. Seperti biasa, ada beberapa metode untuk mencapai tujuan Anda.
Kami mencari arsip Codepen untuk menemukan contoh menarik dari elemen lengket yang digunakan. Di bawah ini, Anda akan menemukan berbagai opsi yang meningkatkan pengalaman pengguna. Jadi, terjebak di kursi mudah Anda dan terinspirasi oleh potongan kode ini!
Dibuat oleh Amit
Header lengket adalah salah satu kasus penggunaan yang paling populer. Pada browser Chromium, cuplikan ini menggunakan CSS untuk mengubah header yang tinggi dan sempit menjadi bar layar penuh saat menggulir. Browser yang tidak didukung menerima sundulan yang lebih sempit, lebih tinggi, lengket. Animasi Keyframe digunakan untuk membuat transisi yang halus. Fitur ini berguna, ringan, dan menarik.
Lihat pena Animasi header CSS murni ke nav lengket oleh Amit
Dibuat oleh Arien Alien
Navigasi sidebar juga dapat memanfaatkan tinggal selama pengguliran. Melayang di atas sidebar memperluas navigasi untuk memasukkan label teks – ini juga berfungsi di ponsel. Namun, Anda juga dapat memesan konsep ini untuk layar besar dan menggunakan menu “hamburger” tradisional untuk ponsel.
Lihat pena Sidenv responsif yang lengket oleh Arien Arien
CSS Sticky Table Header & Kolom
Dibuat oleh Mike Golus
Tabel HTML yang panjang bisa menyebalkan untuk dibaca. Anda harus menghafal header kolom untuk memahami konteksnya. Header lengket membuat meja tersibuk lebih mudah dibaca. Menggunakan position:sticky (dan beberapa trik lainnya) di baris dan kolom pertama memungkinkan pengguliran tanpa kehilangan informasi utama. Contoh -contoh dalam pena ini menunjukkan bagaimana hal itu dilakukan.
Lihat pena CSS Sticky Table Header dan Kolom oleh Mike Golus
Bagian lengket gulir panjang
Dibuat oleh Burma Kentang
Berikut cara unik untuk menunjukkan berbagai bagian halaman panjang. Gulir ke bawah halaman, dan nomor episode (ditampilkan di kolom kiri) tongkat sampai Anda mencapai ujung bagian. Cuplikan menggabungkan posisi lengket dengan calc() milik pada ketinggian wadah untuk menjaga angka tetap pada tampilan. Sedikit CSS ini menambahkan sentuhan yang bagus untuk pengalaman pengguna.
Lihat pena Cukup lengket oleh kentang Burma
Hanya tata letak bagian lengket lainnya
Dibuat oleh Misala
Elemen desain lengket juga dapat digunakan untuk memamerkan fitur produk. Gulir ke bawah halaman ini dan tontonlah saat teks dan video unggulan berubah. Tata letak menempati seluruh viewport layar dan responsif untuk perangkat seluler. Ini adalah fitur kelas atas yang pasti akan menarik perhatian pengguna.
Lihat pena Hanya tata letak bagian lengket lainnya oleh misala
Dibuat oleh Den
Cuplikan ini mengajukan pertanyaan: Bagaimana jika Anda memiliki lebih dari satu bilah navigasi? Bilah pertama lengket secara default. Gulir melewati beberapa bagian, dan batang sub-navigasi kedua berbaris di bawahnya. Bilah kedua itu juga memiliki tampilan kaca buram yang rapi saat gulungan konten di bawahnya.
Lihat pena Tata Letak Sticky + Filter #2024 oleh Den
Video Sticky dengan CSS @Container Scroll-State ()
Dibuat oleh jhey
Kami melihat lebih banyak situs web menerapkan video lengket, di mana presentasi menempel di sudut bawah saat menggulir. Ini memungkinkan pengguna untuk melihat sisa konten Anda tanpa kehilangan video. Di Sini, Kueri kontainer CSS digunakan untuk memposisikan ulang pemutar video. Gunakan panel konfigurasi yang disertakan untuk melihat bagaimana pengaturan yang berbeda memengaruhi efek animasi.
Lihat pena Css @container scroll-state () video pip faux oleh Jhey
Komponen sidebar lengket dinamis
Dibuat oleh Ryan Mulligan
Fitur seperti keranjang belanja sangat cocok untuk sidebar yang lengket. UI memudahkan pembeli untuk melacak gerobak mereka dan, yang paling penting, menyelesaikan pembelian mereka. Widget sidebar ini melacak konten gerobak dan menempel di layar saat Anda menggulir di area konten halaman.
Lihat pena Komponen sidebar lengket dinamis oleh Ryan Mulligan
Tetap dengan apa yang berhasil dalam desain Anda
Kami mungkin menganggap elemen lengket sebagai digunakan untuk header situs dan navigasi. Namun, contoh -contoh di atas menunjukkan bahwa mereka dapat melakukan lebih banyak lagi. Ada begitu banyak kemungkinan kreatif untuk memberi tahu dan menghibur pengguna.
Terlebih lagi, CSS dapat melakukan banyak pengangkatan berat untuk Anda. Beberapa cuplikan dalam koleksi ini tidak memerlukan satu baris JavaScript. Tetap saja, senang mengetahui bahwa Anda dapat menambahkan beberapa manipulasi DOM saat dibutuhkan.
Kami berharap koleksi ini memicu imajinasi Anda! Lihat kami Koleksi Codepen untuk cuplikan yang lebih lengket.
Atas
