Di bawah ini kita akan mempelajari cara membuat elemen sticky dengan CSS.
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> div.sticky { position: -webkit-sticky; position: sticky; top: 0; background-color: green; padding: 50px; font-size: 20px; } </style> </head> <body> <h2>Contoh Sticky Element: Scroll ke bawah untuk melihat efeknya</h2> <p> Scroll ke bawah halaman ini untuk melihat cara kerja sticky positioning. </p> <div class = "sticky"> Saya akan tetap di layar saat Anda mencapai posisi gulir saya </div> <p>Tulis sebuah teks di sini agak panjang agar bisa di scroll ke bawah</p> <h2>Scroll kembali ke atas untuk "menghapus" posisi sticky.</h2> <p>Belajar cara membuat sticky element bersama-sama di dosenit.Belajar cara membuat sticky element bersama-sama di dosenit.Belajar cara membuat sticky element bersama-sama di dosenit.Belajar cara membuat sticky element bersama-sama di dosenit.Belajar cara membuat sticky element bersama-sama di dosenit.Belajar cara membuat sticky element bersama-sama di dosenit.Belajar cara membuat sticky element bersama-sama di dosenit.Belajar cara membuat sticky element bersama-sama di dosenit.Belajar cara membuat sticky element bersama-sama di dosenit.Belajar cara membuat sticky element bersama-sama di dosenit.Belajar cara membuat sticky element bersama-sama di dosenit.Belajar cara membuat sticky element bersama-sama di dosenit.Belajar cara membuat sticky element bersama-sama di dosenit.Belajar cara membuat sticky element bersama-sama di dosenit.Belajar cara membuat sticky element bersama-sama di dosenit.Belajar cara membuat sticky element bersama-sama di dosenit.Belajar cara membuat sticky element bersama-sama di dosenit.Belajar cara membuat sticky element bersama-sama di dosenit.Belajar cara membuat sticky element bersama-sama di dosenit.Belajar cara membuat sticky element bersama-sama di dosenit.Belajar cara membuat sticky element bersama-sama di dosenit.Belajar cara membuat sticky element bersama-sama di dosenit.Belajar cara membuat sticky element bersama-sama di dosenit.Belajar cara membuat sticky element bersama-sama di dosenit.Belajar cara membuat sticky element bersama-sama di dosenit.Belajar cara membuat sticky element bersama-sama di dosenit.Belajar cara membuat sticky element bersama-sama di dosenit.Belajar cara membuat sticky element bersama-sama di dosenit.Belajar cara membuat sticky element bersama-sama di dosenit.Belajar cara membuat sticky element bersama-sama di dosenit.Belajar cara membuat sticky element bersama-sama di dosenit.Belajar cara membuat sticky element bersama-sama di dosenit.Belajar cara membuat sticky element bersama-sama di dosenit.Belajar cara membuat sticky element bersama-sama di dosenit.</p> </body> </html>
Catatan: Contoh ini tidak berfungsi di Internet Explorer atau Edge 15 dan versi sebelumnya.
Membuat Elemen Sticky
Langkah 1) Tambahkan HTML:
Contoh
<h2>Sticky Element: Scroll Down to See the Effect</h2> <p> Scroll ke bawah halaman ini untuk melihat cara kerja sticky positioning. </p> <div class = "sticky"> Saya akan tetap di layar saat Anda mencapai posisi gulir saya </div> <p>Some example text..</p>
Langkah 2) Tambahkan CSS:
Contoh
div.sticky {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
}Penjelasan Kode
Sebuah elemen dengan position: sticky; diposisikan berdasarkan posisi scrolling pengguna.
Elemen sticky beralih antara relative dan fixed, bergantung pada posisi scrolling. Hal ini diposisikan karena relatif hingga posisi offset tertentu terpenuhi di viewport – lalu “menempel” di tempatnya (seperti position:fixed).
Catatan: Internet Explorer, Edge 15 dan versi sebelumnya tidak mendukung elemen sticky. Safari membutuhkan awalan -webkit-. Kita juga harus menentukan setidaknya satu dari top, right, bottom atau left agar pemosisian elemen sticky berfungsi.
