Membuat Sticky Sidebar Dengan CSS position:sticky

Ditulis oleh: Adhy Suryadi

Ditulis pada: 3/09/2017

Awalnya saya tidak yakin jika sticky sidebar bisa dibuat dengan CSS. Yang saya tahu sticky sidebar hanya bisa dibuat dengan javascript. Tentunya hal ini menyulitkan untuk blog dengan AMP HTML yang dilarang menggunakan javascript sendiri.

Kemudian harapan muncul ketika melihat sticky widget pada halaman ampbyexample.com. Lalu muncul pertanyaan, "Kok bisa halaman valid AMP menggunakan sticky widget?"

Setelah ditelusuri, ternyata halaman tersebut tidak menggunakan javascript untuk membuat sticky widget melainkan hanya menggunakan CSS position: sticky;

Karena penasaran, kemudian saya coba position: sticky; ini pada blog Kompi Ajaib ini dan hasilnya silahkan lihat pada sidebar di sebelah kanan, silahkan scroll halaman ini sampai ke bawah, atau bisa mencoba demo di link di bawah ini.


Bagaimana, menarik bukan? Jika ingin mencobanya, silahkan ikuti tutorialnya di bawah ini.

Silahkan simpan kode CSS di bawah ini di atas </head>

<style type='text/css'>

#sidebar-sticky {

  width: 300px;

  float: right;

  padding: 0;

  margin: 0 auto;

  position: -webkit-sticky;

  position: sticky;

  top: 10px;

}

</style>

Untuk lebarnya (width) silahkan sesuaikan dengan lebar sidebar blog masing-masing. Jika blog Anda menggunakan sticky header, silahkan sesuaikan nilai top sesuai tinggi sticky header biar widget tidak terpotong.

Namun ada satu hal yang harus diperhatikan! Jika menggunakan position: sticky; maka pada div induk tidak boleh menggunakan overflow. Nah biasanya div induk untuk main dan aside ini menggunakan class='outer-wrapper', jadi pastikan pada CSS .outer-wrapper tidak menggunakan overflow.

Kemudian silahkan copy kode di bawah ini

<div id='sidebar-sticky'>

  <b:section class='sticky_sidebar' id='sticky_sidebar' preferred='yes'/>

  </div>

Lalu simpan tepat di bawah kode </aside>, sehingga penampakannya seperti di bawah ini

<aside itemprop='mainEntity' itemscope='itemscope' itemtype='https://schema.org/WPSideBar'>

<div id='sidebar-right'>

...........

...........

...........

</div>

</aside>

<div id='sidebar-sticky'>

  <b:section class='sticky_sidebar' id='sticky_sidebar' preferred='yes'/>

  </div>

Kemudian save template.

Silahkan masuk ke Tata Letak atau Layout lalu silahkan tambahkan gadget yang ingin dibuat sticky di bagian sticky_sidebar.