Untuk memasang sticky sidebar yang widgetnya berhenti di footer, bekerjsama dengan memakai CSS position:sticky akan lebih menarik, alasannya tidak butuh JavaScript atau jQuery untuk membuatnya bekerja.
Hanya saja ada beberapa syarat atau kondisi yang harus dipenuhi, bila ingin memasang widget sticky sidebar memakai position:sticky semoga berhasil diterapkan.
Mari kita praktekkan.
Letakkan dulu CSS berikut ini di atas isyarat
Lanjut! Sebagai contoh,
Dalam susunan html yang sederhana, untuk menciptakan
Seperti yang ditandai pada isyarat di atas, widget sticky hanya punya satu induk. Yaitu
Atau,
Jika Anda ingin memasangnya di Blogger/Blogspot dan widget sticky-nya dapat ditambahkan beberapa gadget (add gadget) melalu sajian Layout atau Tata Letak, maka ganti isyarat berikut:
Dengan isyarat ini:
Silahkan temukan tag div di luar dari tag induk sticky tersebut, kemudian tambahkan css berikut ini di dalam tag tersebut. Contoh:
Contoh widget sticky dengan
Seperti ini juga tidak akan berhasil:
Mengapa demikian?
Karena widget sticky telah dikurung oleh 2 tag, yaitu oleh
Selanjutnya: Cara Membuat Widget Sticky Sidebar Mengikuti Scroll ke Atas dan ke Bawah
Hanya saja ada beberapa syarat atau kondisi yang harus dipenuhi, bila ingin memasang widget sticky sidebar memakai position:sticky semoga berhasil diterapkan.
Sedikitnya ada dua syarat penting yang perlu diperhatikan, yaitu:
- Widget
position:stickydihentikan dikurung lebih dari satu induk (tagdiv). Termasuk tag ibaratmain,asidedll. - Induk
div(yang mengurung widget sticky) dihentikan memakai propertyoverflow.
Mari kita praktekkan.
Letakkan dulu CSS berikut ini di atas isyarat
</head> atau </head><!--<head/>--><style type='text/css'>
#sticky-widget{
position:-webkit-sticky;
position:sticky;
top: 20px;
float: right;
width: 300px;
}
</style>
Catatan:
Untuk tutorial kali ini, kita memakai
Untuk tutorial kali ini, kita memakai
#sticky-widget sebagai selector widget sticky.Lanjut! Sebagai contoh,
Dalam susunan html yang sederhana, untuk menciptakan
position:sticky semoga berhasil ialah kondisinya ibarat pola 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 isyarat di atas, widget sticky hanya punya satu induk. Yaitu
content-wrapper.Atau,
Jika Anda ingin memasangnya di Blogger/Blogspot dan widget sticky-nya dapat ditambahkan beberapa gadget (add gadget) melalu sajian Layout atau Tata Letak, maka ganti isyarat berikut:
<div id='sticky-widget'>
<!-- Isi dengan yang ingin di sticky disini -->
</div>
Dengan isyarat 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, kemudian 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 bila susunan HTML template Blogger Anda kurang lebih ibarat 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