Cara Mudah Membuat CSS Position Sticky

by

Dalam mendesain sebuah tampilan web, ada kalanya suatu elemen butuh untuk menempel dan menetap ketika mouse di gerakkan. Dalam CSS, ini biasa disebut Sticky Position. Property ini bertujuan agar suatu elemen tidak ikut bergerak saat scroll mouse di gerakkan naik dan turun.

Saat kita menentukan elemen dengan Position sticky, maka secara otomatis kita harus mendefinisikan elemen parent sebagai container elemen yang akan dijadikan sticky.

Bagaimana Sticky Bekerja?

Sticky Item — adalah elemen yang kita definisikan dengan position: sticky styles. Elemen akan mengambang ketika posisi viewport cocok dengan definisi posisi, misalnya: top: 0px.

Contoh:

.some-component{
    position: sticky;
    top: 0px;
}

Bagaimana jika berada di bawah? atau biasa pada elemen footer. Bisa pakai contoh seperti ini:

.main-footer{     
     position: sticky; 
     bottom: 0;
}

Browsers Support

  • Posisi Sticky didukung oleh semua browser modern utama, kecuali IE lama.
  • Untuk browser Safari, Anda perlu menambahkan awalan -webkit .
position: -webkit-sticky; /* Safari */  
position: sticky;

Bagaimana Penerapannya di WordPress?

Untuk di CMS wordpress, kita bisa melakukan kustomisasi CSS di Appearane –> Customize –> Additional CSS.

Set selector CSS yang akan kita buat sticky. Kita tinggal kustom-kustom saja nilai dari setiap propery CSS sticky tersebut.

Cukup mudah bukan? Demikain cara mudah untuk membuat elemen sticky pada CSS. Semoga bermanfaat.

Leave a Comment