Position sticky not working? Begini Triknya Agar Berhasil!

bungfrangki Tutorial Blog Widget Position sticky not working? Begini Triknya Agar Berhasil!
Gambar
Oleh Bungfrangki ·
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

Posting Komentar

Komentar telah ditutup. Jika ada yang perlu disampaikan terkait konten ini, silahkan kirim pesan lewat laman kontak.