How To

Cara Membuat Elemen Sticky Pada Website

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.


Hanifah Nurbaeti

Share
Tags: CSSHow To