Disable Sticky Sidebar Jquery On Small Devices

Disable Sticky Sidebar Jquery On Small Devices

Bola Hero Gawai

Disable Sticky Sidebar Jquery On Small Devices

Sticky Sidebar Jquery On Small Devices
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
        });
    }
});

Sourcehttp://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....

Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

0 Comment

Add Comment

Komentar dengan link promo akan masuk spam.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Kompi Ajaib? Keep us running by whitelisting Kompi Ajaib in your ad blocker.

This is how to whitelisting Kompi Ajaib in your ad blocker.

Thank you!

×
×
×