Cara Membuat Sticky Widget Pada Navbar

Oleh Syafdillah

12 Februari 2016

Sticky, apa sih? Oh ternyata menghentikan salah satu elemen atau beberapa elemen sekaligus pada suatu blog. Cara kerjanya, jika blog digulirkan ke bawah maka elemen yang dikenakan fungsi sticky tidak akan ikut bergulir alias diam di tempat. Jadi kaya gitu kira-kira fungsi dan cara kerja sticky widget.

Okey, berikut tahap pengerjaannya:

Pertama masuk ke blog Anda jangan blog tetangga ya, lalu pilih blog mana yang akan digunakan untuk sarana latihan. Jika sudah, pilih TEMPLATE lalu pilih EDIT HTML. Selanjutnya Anda akan melihat sekumpulan kode HTML, CSS, dan JQuery berkumpul jadi satu yang membentuk suatu blog Anda.

Cari kode ]]></b:skin>, lalu copas (copy dan paste) kode dibawah ini dan sematkan di atas kode ]]></b:skin>

.makesticking{background:none!important;position:fixed!important;top:25px;z-index:99;-webkit-transform:translateZ(0);}
#menu .widget-content {padding:0;margin:auto;}

Kemudian cari kode </body> lalu copas kode dibawah ini dan sematkan di atas kode </body>

<script type='text/javascript'>
//<![CDATA[
// Sticky Widget
function makemeSticky(e){function t(){var e=s.getBoundingClientRect();e.top<0?(n.className=a+" makesticking",n.style.width=i+"px"):n.className=a}var n=document.getElementById(e),s=document.createElement("div");n.parentNode.insertBefore(s,n);var i=n.offsetWidth,a=n.className+" makesticky";window.addEventListener("scroll",t,!1)}makemeSticky("menu");
//]]>
</script>

menu merupakan elemen yang akan dikenakan fungsi sticky. Jadi jika Anda ingin menggantinya, cari id mana yang akan dikenakan. LIHAT HASILNYA

Ayo Like Facebooknya

Tag : Blogging