Cara Membuat Scrolling Fixed

Tips blog kali ini saya akan share Cara Membuat Scrolling Fixed. Scrolling fixed ini salah satu efek konten yang banyak digunakan pada website dengan desain  modern, fungsinya adalah memberi efek terbawa, saat halaman ditarik kebawah.

Contoh situs yang menggunakan scrolling fixed adalah facebook dan blogger, jika sobat sering masuk ke facebook, saat sobat menarik halaman profile  kebawah, ada sebuah konten yang seolah tertarik kebawah, mengikuti layar. Begitu juga dengan blogger, blogger menggunakan efek scrolling fixed di dashboard pada bagian header, saat sobat menarik halaman dashboar blogger kebawah, maka bagian headernya seolah terangkat dan terseret kebawah. Untuk Live demonya silahkan sobat lihat disi : DEMO.

Lalu bagaimana cara membuatnya ? jika sobat tertarik untuk membuat nya silahkan ikuti langkah berikut : Untuk membuat efek scrolling fixed ini, sobat tinggal masuk ke halaman edit html blogger, dan memasukan kode javascript berikut tepat diatas penutup tag head </head>.

<script>

$(document).ready(function(){

/* loefa-cebook.blogspot.com scrolling fixed div start */

 var div = $('#header-wrapper');

    var lc = $(div).offset().top;

  

    $.event.add(window, "scroll", function() {

        var p = $(window).scrollTop();

        $(div).css('position',((p)>lc) ? 'fixed' : '');

        $(div).css('top',((p)>lc) ? '0px' : '');

  $(div).css('box-shadow',((p)>lc) ?'0px 0px 3px #222':'');

   

   

    });

  

});

</script>

Note :
Jika sobat ingin yang diberi efek ini pada menu navigasi blog bukan pada header, sobat tinggal mengganti “#header-wrapper” yang ada di kode javascript, dengan tag css menu navigasi, contoh “#menu”, jika sudah berhasil silahkan di save.

Cukup sekian tips blog kali ini, terima kasih telah membaca artikel Cara Membuat Scrolling Fixed.

Semoga bermanfaat

Source

Tweet