Membuat Sticky Sidebar Dengan Css Position:Sticky

Awalnya aku tidak yakin bila sticky sidebar dapat dibentuk dengan CSS. Yang aku tahu sticky sidebar hanya dapat dibentuk dengan javascript. Tentunya hal ini menyulitkan untuk blog dengan AMP HTML yang tidak boleh memakai javascript sendiri.

Kemudian impian muncul dikala melihat sticky widget pada halaman ampbyexample.com. Lalu muncul pertanyaan, "Kok dapat halaman valid AMP memakai sticky widget?"

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

Karena penasaran, kemudian aku coba position: sticky; ini pada blog Kompi Ajaib ini dan balasannya silahkan lihat pada sidebar di sebelah kanan, silahkan scroll halaman ini hingga ke bawah, atau dapat mencoba demo di link di bawah ini.

DEMO

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

Silahkan simpan aba-aba 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 memakai sticky header, silahkan sesuaikan nilai top sesuai tinggi sticky header supaya widget tidak terpotong.

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

Kemudian silahkan copy aba-aba di bawah ini

 <div id='sidebar-sticky'>
   <b:section class='sticky_sidebar' id='sticky_sidebar' preferred='yes'/>
   </div>

Lalu simpan sempurna di bawah aba-aba </aside>, sehingga penampakannya menyerupai 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 kemudian silahkan tambahkan gadget yang ingin dibentuk sticky di bab sticky_sidebar.
Sumber https://www.kompiajaib.com/

Share this post