Ditulis oleh: Ditulis pada: 11/04/2014
Disable Sticky Sidebar Jquery On Small Devices - Sebelumnya saya pernah memposting cara membuat sticky sidebar dengan jquey. Dengan begitu kita dapat membuat sidebar melayang atau selalu tampil mengikuti scroll dengan mudah dengan hanya menggunakan jquery yang sederhana dan mudah dalam penerapannya.
Namun kadang sticky sidebar ini mengalami masalah yaitu widgetnya suka merosot terus ke bawah tanpa ada ujungnya untuk berhenti. Apalagi jika diterapkan pada template reponsive, maka sticky sidebar ini semakin membuat kacau tampilan mobilenya (biasanya tampilan blog menjadi satu kolom pada ukuran device 728px) dengan terus merosot ke bawah sehingga bagian footer tidak bisa tampil. Dan sepertinya masalah ini hampir terjadi pada semua sticky widget pada tampilan mobile.
Untuk itu kemudian saya mencari cara agar sticky widget ini dapat berjalan dengan baik pada template normal ketika diakses dengan komputer dan ketika diakses dengan device ukuran kecil (kurang dari 728px) yang biasanya pengaturan pada media query menjadi 1 kolom, sticky widget ini dinonaktifkan. Artinya sticky widget ini tidak melayang pada device ukuran kecil sehingga widgetnya tidak merosot terus ke bawah.
Kemudian saya menemukan jquery yang setelah saya coba ternyata dapat bekerja dengan baik seperti pada demo di bawah ini dengan sedikit modifikasi.
Untuk tampilan normal
Pada tampilan responsive testing tool
Silahkan coba scroll halamannya pada device ukuran kecil, maka kotak merah (sticky widget) akan tetap diam di tempat.
$sidebar = $("#divB");
$window = $(window);
var sidebarOffset = $sidebar.offset();
$window.scroll(function () {
if ($window.scrollTop() > sidebarOffset.top) {
$sidebar.stop().animate({
marginTop: $window.scrollTop() - sidebarOffset.top
});
} else {
$sidebar.stop().animate({
marginTop: 0
});
}
});
Source: http://www.technicaloverload.com/scrolling-floating-sidebar-in-jquery/
Namun pada tampilan mobile, dengan jquery di atas sticky widgetnya terus merosot ke bawah. Dan saya menemukan cara agar sticky widget ini tetap diam (tidak mengikuti scroll) pada ukuran mobile device dengan menambahkan kode berikut.
if($window.width() < 770) {
$sidebar.stop().animate({
marginTop: 0
});
}
kode angka
770 adalah ukuran media query yang mengatur tampilan blog menjadi 1 kolom dengan width:100% untuk semua elemen. Silahkan sesuaikan dengan media query blog Anda yang mengatur blog menjadi 1 kolom.
Sehingga jika disatukan menjadi seperti di bawah ini.
$sidebar = $("#divB");
$window = $(window);
var sidebarOffset = $sidebar.offset();
$window.scroll(function () {
if ($window.scrollTop() > sidebarOffset.top) {
$sidebar.stop().animate({
marginTop: $window.scrollTop() - sidebarOffset.top
});
} else {
$sidebar.stop().animate({
marginTop: 0
});
}
if($window.width() < 770) {
$sidebar.stop().animate({
marginTop: 0
});
}
});
Kode
#divB adalah id widget yang dibuat sticky. Silahkan ganti dengan id gadget sidebar blog Anda yang ingin dibuat melayang.
Jika ingin menambahkan margin atas ketika widget ini menjadi sticky, maka tambahkan kode
+ 80 setelah kode marginTop: $window.scrollTop() - sidebarOffset.top. Angka 80 adalah margin atas sticky widget 80px. Sehingga jika ditulis dengan memberikan margin top pada sticky widgetnya menjadi seperti di bawah ini.
$sidebar = $("#divB");
$window = $(window);
var sidebarOffset = $sidebar.offset();
$window.scroll(function () {
if ($window.scrollTop() > sidebarOffset.top) {
$sidebar.stop().animate({
marginTop: $window.scrollTop() - sidebarOffset.top + 80
});
} else {
$sidebar.stop().animate({
marginTop: 0
});
}
if($window.width() < 770) {
$sidebar.stop().animate({
marginTop: 0
});
}
});
Selamat mencoba dan berkreasi... happy blogging....