Cara Membuat Menu Menempel Pada Layar Setelah Discroll

Oleh Rafid Aslam

4 Agustus 2014

Widget ini berfungsi agar pengunjung tidak bolak-balik ke atas hanya untuk melihat menu. Sudah banyak yang memakainya, prinsipnya hampir sama dengan membuat widget melayang pada blog tetapi ini berbeda. Saat discroll menu akan terus menempel/melayang pada layar dan selalu mengikuti orang tersebut menscroll, akan tetapi jika dibuka dihandphone maka hanya merepotkan pengunjung karena layarnya tertutup.

Jadi saya sarankan lihat dulu template anda sebelum memakainya cocok atau tidak, dan dilihat elemen mana yang mau dipasang agar melayang, di sini ada dua cara yaitu membuat menu menempel di layar saat discroll dan membuat menu muncul setelah discroll.


Menu menempel/melayang saat discroll

Ini sudah umum dan sudah digunakan banyak blog, menunya sudah ada tetapi saat discroll maka menu tersebut akan menempel/melayang di layar.

Letakkan kode di bawah ini di atas kode </body>

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
    // Menentukan elemen yang dijadikan sticky yaitu .nav
    var stickyNavTop = $('.nav').offset().top; 
    var stickyNav = function(){
        var scrollTop = $(window).scrollTop();  
        // Kondisi jika discroll maka menu akan selalu diatas, dan sebaliknya        
        if (scrollTop > stickyNavTop) { 
            $('.nav').css({ 'position': 'fixed', 'top':0, 'z-index':9999 });
        } else {
            $('.nav').css({ 'position': 'relative' });
        }
    };
    // Jalankan fungsi
    stickyNav();
    $(window).scroll(function() {
        stickyNav();
    });
});
//]]>
</script>

Sesuaikan dan ganti elemen yang berwarna kuning menjadi elemen yang ingin melayang setelah discroll.

Memunculkan menu setelah discroll

Apabila anda hanya ingin memunculkan menu tersebut setelah discroll, maka letakkan kode di bawah ini di atas kode </body>.

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
    // Menentukan elemen yang dijadikan sticky yaitu .nav
    var stickyNavTop = $('.nav').offset().top; 
    var stickyNav = function(){
        var scrollTop = $(window).scrollTop();  
        // Kondisi jika discroll maka menu akan selalu diatas, dan sebaliknya        
        if (scrollTop > stickyNavTop) { 
            $('.nav').css({ 'position': 'fixed', 'top':0, 'z-index':9999 });
        } else {
            $('.nav').css({ 'position': 'absolute', 'top':-9999, 'left':-9999 });
        }
    };
    // Jalankan fungsi
    stickyNav();
    $(window).scroll(function() {
        stickyNav();
    });
});
//]]>
</script>

Sesuaikan kode yang berwarna kuning menjadi elemen yang ingin dibuat muncul setelah discroll.

Jika anda kebingungan dan tidak tahu dengan sempurna cara di atas bisa ditanyakan di kotak komentar di bawah ini.

Tag : Tips Blogger

Bagikan :

Tweet