Tutorial Blog dan Tips AdSense

Dijual rumah di Jakarta Timur, selengkapnya klik di sini

Cara Membuat Menu Menempel Pada Layar Setelah Discroll

Cara Membuat Menu Menempel Pada Layar Setelah Discroll
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
3 Komentar untuk "Cara Membuat Menu Menempel Pada Layar Setelah Discroll"

sayamemang bingung nih maksud elemnt itu nama id yang mau dibuat stikky atau menempel

mantab mas , tapi ak masih bingung

Perkenalkan, saya dari tim kumpulbagi. Saya ingin tau, apakah kiranya anda berencana untuk mengoleksi files menggunakan hosting yang baru?
Jika ya, silahkan kunjungi website ini www.kbagi.com untuk info selengkapnya.

Di sana anda bisa dengan bebas share dan mendowload foto-foto keluarga dan trip, music, video, filem dll dalam jumlah dan waktu yang tidak terbatas, setelah registrasi terlebih dahulu. Gratis :)

Saya minta agar anda tidak memakai akun Anonim untuk berkomentar, gunakan akun anonim hanya saat anda sedang dalam keadaan darurat, saya minta juga untuk tidak menggunakan kata-kata kasar dalam berkomentar. Terimakasih atas perhatiannya.