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.
Source
