Ternyata Begini Cara Membuat Sticky Sidebar Tanpa Javascript

Pada sebelumya saya pernah membuat sticky sidebar tapi masih menggunakan Javascript yang tidak boleh digunakan pada blog AMP .karena menjadi tidak valid. Dan saya baru tahu kalo ternyata tanpa Javascript juga bisa membuat sticky pada sidebar.

Setelah disarankan untuk jangan memakai javascript akhirnya browsing dan menemukan artikel Membuat Sticky Sidebar Dengan CSS di webnya Mas Adhy Kompi Ajaib Hanya dengan modal CSS ternyata bisa membuat sticky pada sidebar dan valid AMP. Tapi awalnya gagal, alias gak bisa mentok jadi sticky. Setelah balik membaca lagi, ealah ternyata sepele. Cuma menghapus code overflow pada bagian #wrapper atau div induknya.

Ini Dia Css Sticky Sidebar

  <style type="text/css">
  #sticky {
      width:250px;
      float:right;
      padding:0;
      margin:0 auto;
      position:-webkit-sticky;
      position:sticky;top:10px;}
  </style>

Sisipkan diatas kode </head>. Pada baris Width sesuaikan dengan lebar sidebar templete.

Cara Menggunakan :

Misalkan seperti pada templete infinite AMP ini pada bagian sidebar kanan menggunakan div ID sidebar wrapper, maka tambahkan ID script diatas sebelum kode div ID sidebar. Begini kira-kira penerapannya:

Script Asli sidebar kanan

 <div id="sidebar-wrapper">
  ISI SIDEBAR
 </div>

Maka jika ditambahkan class sticky menjadi seperti berikut:

 <div id="sticky">
 <div id="sidebar-wrapper">
 ISI SIDEBAR
 </div>
 </div> 

Untuk contoh bisa dilihat pada sidebar sebelah kanan blog ini. Mudah bukan ? Selamat Mencoba dan berkreasi supaya lebih kreatif :).