Membuat Sticky Sidebar Dengan CSS position:sticky

Membuat Sticky Sidebar Dengan CSS position:sticky - Setelah sebelumnya kita Membuat Spoiler Dengan CSS (Tanpa JavaScript) Kali ini kita akan Membuat Sticky pada Sidebar atau Widget.

Biasanya untuk membuat sticky kita harus menggunakan JavaScript, namun disini kita akan Membuat Sticky Sidebar Dengan CSS position:sticky, sehingga tidak menggunakan JavaScript, dan tentunya ini akan memudahkan pengguna AMP yang tidak di perbolehkan menggunakan javascript selain script dari amp-project.

Untuk demonya silahkan Anda lihat sidebar blog ini disebelah kiri. Nah, jika Anda ingin memasangnya di blog Anda juga, mari ikutu caranya berikut ini.

Membuat Sticky Sidebar Dengan CSS position:sticky

---

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 Anda. Jika blog Anda menggunakan sticky header, silahkan sesuaikan nilai top sesuai tinggi sticky header biar widget tidak terpotong.

Namun 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.