Disable Sticky Sidebar Jquery On Small Devices

Disable Sticky Sidebar Jquery On Small Devices - Sebelumnya aku pernah memposting cara menciptakan sticky sidebar dengan jquey. Dengan begitu kita sanggup menciptakan sidebar melayang atau selalu tampil mengikuti scroll dengan gampang dengan hanya memakai jquery yang sederhana dan gampang dalam penerapannya.

Namun kadang sticky sidebar ini mengalami duduk kasus yaitu widgetnya suka merosot terus ke bawah tanpa ada ujungnya untuk berhenti. Apalagi bila diterapkan pada template reponsive, maka sticky sidebar ini semakin menciptakan kacau tampilan mobilenya (biasanya tampilan blog menjadi satu kolom pada ukuran device 728px) dengan terus merosot ke bawah sehingga bab footer tidak sanggup tampil. Dan tampaknya duduk kasus ini hampir terjadi pada semua sticky widget pada tampilan mobile. 

Untuk itu kemudian aku mencari cara supaya sticky widget ini sanggup berjalan dengan baik pada template normal dikala diakses dengan komputer dan dikala 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 aku menemukan jquery yang sesudah aku coba ternyata sanggup bekerja dengan baik menyerupai pada demo di bawah ini dengan sedikit modifikasi.

DEMO

Untuk tampilan normal

DEMO

Pada tampilan responsive testing tool

Silahkan coba scroll halamannya pada device ukuran kecil, maka kotak merah (sticky widget) akan tetap membisu 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 aku menemukan cara supaya sticky widget ini tetap membisu (tidak mengikuti scroll) pada ukuran mobile device dengan menambahkan isyarat berikut.

 if($window.width() < 770) {
         $sidebar.stop().animate({
             marginTop: 0
         });
    }

isyarat angka 770 yaitu 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 bila disatukan menjadi menyerupai 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 yaitu id widget yang dibentuk sticky. Silahkan ganti dengan id gadget sidebar blog Anda yang ingin dibentuk melayang.

Jika ingin menambahkan margin atas dikala widget ini menjadi sticky, maka tambahkan kode + 80 sesudah isyarat marginTop: $window.scrollTop() - sidebarOffset.top. Angka 80 yaitu margin atas sticky widget 80px. Sehingga bila ditulis dengan menunjukkan margin top pada sticky widgetnya menjadi menyerupai 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....

Sumber https://www.kompiajaib.com/

Share this post