Buat Elemen Sticky DIV Pada Gulir

sukma
sukma
4 minute read

Hari ini, kita akan membuat elemen div HTML yang melekat pada event window scroll. Mau tau caranya? Nah, ketika gulir mencapai titik tertentu dari halaman web, kita akan menggunakan div dengan menggunakan properti posisi CSS. Jadi, lanjutkan.

Salah satu cara untuk membuat header sticky animasi on-scroll dengan menggunakan jQuery tetapi di sini kita akan bereksperimen dengan CSS hanya dengan menggunakan properti positioningnya.

Anda mungkin memiliki pengalaman membuat tajuk atau footer lengket dengan bantuan position: sticky; yang selalu berada di bagian atas halaman, tetapi bagaimana jika membuat elemen melekat di bawah blok konten?

Dengan bantuan kedua properti posisi relative dan fixed, kita dapat dengan mudah membuat elemen lengket tergantung pada posisi gulir. Posisi elemen tetap relatif hingga mencapai posisi offset yang diberikan - lalu "menempel" di tempatnya (seperti posisi: tetap).

Ada dua jenis properti posisi position: sticky; dan position: fixed; yang memungkinkan kita membuat elemen tetap. Keduanya bekerja dengan cara yang mirip untuk memperbaiki elemen HTML dan mempertahankan posisinya di layar browser, bahkan pengguna menggulir ke bawah atau ke atas ke halaman.

Tetapi elemen lengket terikat ke wadah induknya sedangkan elemen tetap tidak terbatas pada induknya.

catatan: Internet Explorer yang lebih lama, Edge 15, dan versi sebelumnya tidak mendukung pemosisian: lengket, Safari memerlukan awalan -WebKit-. Penting juga untuk menentukan setidaknya satu posisi top, right, bottom atau left untuk membuat pekerjaan menjadi elemen lengket.

Jadi apa yang akan saya lakukan dalam tutorial ini untuk membuat elemen div yang terletak di bawah blok konten. Ketika pengguna menggulir cukup untuk menghubungi area batas atasnya, itu menjadi tetap di tempat dan mulai menggulir dengan halaman.

Saya akan membahas dua metode berbeda.

  • Sebuah tipikal sticky metode yang terbatas pada induk.
  • SEBUAH fixed elemen yang tidak terbatas pada induknya.

Penampung Elemen Lengket (div)

Mari kita mulai dengan metode lengket. Kita punya sebuah div pembungkus dan tambahan div elemen dengan ID "melekat". Selain itu, kami menempatkan dua div tambahan untuk tujuan demo.

Anda dapat mengira ini akan menjadi area konten atas dan bawah Anda dan kami menerapkan posisi melekat pada anak div pembungkus utama kami.

Inilah markup sederhana:

<div class="extra"></div> <br /> <div id="wrapper">   <div id="sticky">     sticky   </div> </div> <br /> <div class="extra"></div>

Dan sekarang gaya kami, Kami gunakan posisi: tongkat dengan poin teratas itu. Tinggi dan lebarnya sesuai dengan kebutuhan kita. Perhatikan tampilan: flex; digunakan untuk membuat pekerjaan menjadi lengket dengan baik. Jadi, CSS untuk "sticky div on scroll" adalah sebagai berikut:

#sticky {   position: sticky;   position: -webkit-sticky;   background: #f83d23;   width: 100px;   height: 100px;   top: 70px;   display: flex;   justify-content: center;   align-items: center;   box-shadow: 0 0 6px #000;   color: #fff; } .extra, #wrapper {   width: 75%;   margin: auto;   background-color: #ccc; } #wrapper {   height: 800px; } .extra {   height: 100px; }

Elemen Posisi Tetap

Sekarang dalam contoh kedua kita, kita akan menggunakan elemen posisi tetap dan saat pengguna menggulirnya tidak akan terbatas pada induk div.

Mirip dengan metode pertama kami, Kami telah menempatkan dua div tambahan untuk demo kemudian kami memiliki penampung pria. Div anak tetap di dalam pembungkus akan tetap tetap saat menggulir halaman.

Ketika Anda melihat demo dari contoh ini, Anda akan melihat div yang lengket tidak akan peduli dengan wadahnya (pembungkus) dan berjalan hingga akhir konten.

<div class="extra"></div> <br /> <div class="wrapper">   <div class="fixed">     fixed   </div> </div> <br /> <div class="extra"></div>

Sedangkan untuk styling, Kami akan menggunakan position: fixed; bersama dengan tampilan fleksibel untuk memastikannya berfungsi dengan baik. Selanjutnya, kami hanya menerapkan beberapa gaya dasar yaitu background, color, dan box-shadow, dll .. fixed {position: fixed; latar belakang: # f83d23; lebar: 100px; tinggi: 100px; tampilan: fleksibel; justify-content: center; sejajarkan-item: tengah; box-shadow: 0 0 6px # 000; warna: #fff; } .extra, .wrapper {width: 75%; margin: otomatis; background-color: #ccc; } .wrapper {height: 800px; } .extra {tinggi: 100px; }

Hanya beberapa hal tambahan yang perlu diperhatikan:

  • Dalam contoh pertama kami, kami menggunakan -webkit-sticky awalan vendor untuk browser WebKit seperti Safari & Chrome.
  • Penting juga untuk mengatur titik agar elemen menjadi lengket menggunakan salah satu dari
  • itu top, bottom, left atau right properti. Itu tergantung ke arah mana pengguna akan menggulir halaman.