Position sticky not working? Begini Triknya Agar Berhasil!

Untuk memasang sticky sidebar yang widgetnya berhenti di footer, sebetulnya dengan menggunakan CSS position:sticky akan lebih menarik, sebab tidak butuh JavaScript atau jQuery untuk membuatnya bekerja.
Cara memasang widget sticky sidebar dengan position:sticky di Blogger

Hanya saja ada beberapa syarat atau kondisi yang harus dipenuhi, jika ingin memasang widget sticky sidebar menggunakan position:sticky agar berhasil diterapkan.

Sedikitnya ada dua syarat penting yang perlu diperhatikan, yaitu:
  • Widget position:sticky tidak boleh dikurung lebih dari satu induk (tag div). Termasuk tag seperti main, aside dll.
  • Induk div (yang mengurung widget sticky) tidak boleh menggunakan property overflow.

Mari kita praktekkan.

Letakkan dulu CSS berikut ini di atas kode </head> atau &lt;/head&gt;&lt;!--<head/>--&gt;
<style type='text/css'>
#sticky-widget{
position:-webkit-sticky;
position:sticky;
top: 20px;
float: right;
width: 300px;
}
</style>

Catatan:
Untuk tutorial kali ini, kita menggunakan #sticky-widget sebagai selector widget sticky.

Lanjut! Sebagai contoh,

Dalam susunan html yang sederhana, untuk membuat position:sticky agar berhasil adalah kondisinya seperti contoh berikut.
<!DOCTYPE html>
<html>
<head>
<title>Ini Website Saya</title>
</head>
<body>
<div id='content-wrapper' class='content-wrapper'>
<main id='main-wrapper'>
.................
</main>
<aside id='sidebar-wrapper'>
.................
</aside>
<div id='sticky-widget'>
<!-- Widget yang ingin di sticky disini -->
</div>
</div>
<footer id='footer-wrapper'>
.................
</footer>
</body>
</html>

Seperti yang ditandai pada kode di atas, widget sticky hanya punya satu induk. Yaitu content-wrapper.

Atau,

Jika Anda ingin memasangnya di Blogger/Blogspot dan widget sticky-nya bisa ditambahkan beberapa gadget (add gadget) melalu menu Layout atau Tata Letak, maka ganti kode berikut:
<div id='sticky-widget'>
<!-- Isi dengan yang ingin di sticky disini -->
</div>

Dengan kode ini:
  <b:section class='stickyside' id='sticky-widget' name='Sticky Widget' preferred='yes'/>

Solusi lainnya

Jika Anda sudah menerapkan cara di atas dengan benar, tetapi widget sticky masih not working, silahkan lakukan cara berikut:

Silahkan temukan tag div di luar dari tag induk sticky tersebut, lalu tambahkan css berikut ini di dalam tag tersebut. Contoh:
.all-container{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column}
Solusi di atas wajib diterapkan jika susunan HTML template Blogger Anda kurang lebih seperti ini:
<!DOCTYPE html>
<html>
<head>
<title>Ini Website Saya</title>
</head>
<body>
<div class='all-container'>
<div id='content-wrapper' class='content-wrapper'>
<main id='main-wrapper'>
.................
</main>
<aside id='sidebar-wrapper'>
.................
</aside>
<div id='sticky-widget'>
<!-- Widget yang ingin di sticky disini -->
</div>
</div>
<footer id='footer-wrapper'>
................
</footer>
</div>
</body>
</html>

Contoh widget sticky dengan position:sticky yang TIDAK akan BERHASIL:
<div id='content-wrapper' class='content-wrapper'>
<main id='main-wrapper'>
.................
</main>
<aside>
<div  id='sidebar-wrapper'>
  <b:section class='sidebar' id='sidebar' preferred='yes'/>
</div>
<div id='sticky-widget'>
  <b:section class='stickyside' id='sticky' preferred='yes'/>
</div>
</aside>
</div>

Seperti ini juga tidak akan berhasil:
<div id='content-wrapper'>
<main id='main-wrapper'>
.................
</main>
<aside id='sidebar-wrapper'>
  <b:section class='sidebar' id='sidebar' preferred='yes'/>
  <b:section class='stickyside' id='sticky-widget' preferred='yes'/>
</aside>
</div>

Mengapa demikian?

Karena widget sticky telah dikurung oleh 2 tag, yaitu oleh <div id='content-wrapper' class='content-wrapper'> dan <aside> atau <aside id='sidebar-wrapper'>

Selanjutnya: Cara Membuat Widget Sticky Sidebar Mengikuti Scroll ke Atas dan ke Bawah
Advertisement
Free and premium blogger templates