Membuat Auto Scroll Follow Sidebar

Cara membuat auto scroll follow sidebar, tutorial ini menjelaskan cara membuat sidebar dalam posisi fixed artinya saat kita melakukan scroll (gulir) browser maka sidebar itu akan mengikuti juga jadi tidak bersifat static, hal ini memudahkan kita yang membuat program one page crud atau menu sidebar yang mengikuti kemana arah scroll (gulir) apakah keatas atau kebawah. Sebenarnya kita bisa menambahkan sintaks css yang sedikit aja (position:fixed) namun sintaks ini tidak berjalan sempurna artinya ia hanya fixed browser aja tanpa ada efek animasi berjalan.

Pada tutorial ini kita akan membuat sidebar akan mengikut kemana guliran atau scroller yang kita lakukan pada browser apakah keatas atau kebawah dan tidak mengubah posisi lebar (bukan tinggi), jika menggunakan sintaks dasar position fixed css maka letak posisi tidak sejajar dengan desain kolom layout kita berbeda dengan halnya yang akan kita bahas pada artikel ini.

Penggunaan Dasar CSS

Cara yang paling mudah adalah dengan menggunakan css seperti yang telah saya jelaskan diatas namun kekurangannya tata letaknya harus kita desain ulang seperti mengatur ukuran margin atau kanan/kiri untuk menyesuaikan dengan konten/artikel, sintaks sederhana seperti dibawah ini.

#content { 
  width: 700px; 
  margin: 15px auto; 
  position: relative; 
}

#sidebar { 
  width: 300px; 
  position: fixed; 
  margin-left: 510px; 
}

Dengan teknik ini sidebar tetap pada posisinya pada saat scroll lagi bergulir keatas atau kebawah seperti sudah menempel pada jendela browser

Efek Animasi jQuery

Jika kita menggunakan jquery/javascript maka sidebar akan berjalan/beranimasi saat kita lagi mengulir scroll baik keatas maupun kebawah mulain dari posisi dasar sampai pada batasan akhir sidebar tersebut, selain itu kita bisa mengukur seberapa jauh guliran scrollnya beserta dengan juga mengatur sesuka hati kita.

$(function() {

    var $sidebar   = $("#sidebar"), 
        $window    = $(window),
        offset     = $sidebar.offset(),
        topPadding = 15;

    $window.scroll(function() {
        if ($window.scrollTop() > offset.top) {
            $sidebar.stop().animate({
                marginTop: $window.scrollTop() - offset.top + topPadding
            });
        } else {
            $sidebar.stop().animate({
                marginTop: 0
            });
        }
    });
    
});

Metode ini lebih ditekankan pada pemberian efek animasi berjalan saat jendela sidebar lagi bergulir scroll keatas atau kebawah. Sekian