Cara Gampang Menciptakan Sticky Sajian Di Blog | Ristofa.Com


 niscaya kita menemukan beberapa navigasi yang melayang dikala  Cara gampang menciptakan sticky sajian di blog | ristofa.com


Cara gampang menciptakan sticky sajian di blog – Saat kita berkunjung  di website-website yang ada di Internet, niscaya kita menemukan beberapa navigasi yang melayang dikala scroll mouse.. 


Intinya, dikala posisi layar berada di paling atas (menampilkan header sebuah website) posisi navigasi terlihat ibarat pada umumnya. Namun dikala kita ingin melihat tampilan website yang lebih kebawah (scroll mouse), navigasinya menjadi melayang alias tidak ikut hilang ibarat bagian-bagian lain. Menu ibarat ini disebut sticky menu. Contoh mudahnya dapat dilihat di blog ristofa.com ini.

Jika navigasi di blog kita ingin dibentuk sticky menu, caranya gampang kok. 

  • copy arahan java scrypt berikut ini. (blok dan tekan CTRL + C)

<script type=’text/javascript’>
//<![CDATA[
$(document).ready(function() {
    var stickyNavTop = $(‘#sticky-menu‘).offset().top;
    var stickyNav = function(){
        var scrollTop = $(window).scrollTop();
        if (scrollTop > stickyNavTop) {
          $(‘#sticky-menu‘).css({ ‘position’: ‘fixed’, ‘top’:0, ‘z-index’:9999, });
        } else {
          $(‘#sticky-menu‘).css({ ‘position’: ‘relative’, });
        }
    };
    stickyNav();
    $(window).scroll(function() {
        stickyNav();
    });
});
//]]>
</script>

  • Buka sajian template pada blog dan pilih edit template.
  • Paste kan arahan diatas sebelum tag </body> yang paling bawah..
  • Ganti teks berwarna merah dengan arahan css yang digunakan untuk navigasi diatas.
Jika ada hambatan dikala meng-aplikasikan arahan diatas, silakan bertanya di kolom komentar.





Related Posts