Membuat Menu Static Setelah Scroll

Sering terlihat sebuah menu pada website berada posisi diatas dan diam walau sudah  melakukan scrolling panjang ke bawah. Pada tulisan ini akan dibahas mengenai cara untuk membuat menu tersebut.

Buat Logo, Menu dan Konten

Pada bagian ini kita akan membuat logo, menu dan konten. Berikut ini kode HTML :

<html>
    <head>
        <title>Menu Static</title>
        <style type="text/css">
            body{
                margin: 0px;padding:0px;height:2000px;
            }
            .logo{background-color: blue;width:100%;height:60px;}
            .menu{background-color: green;width:100%;height:40px; }
        </style>
    </head>
<body>
    <div class="logo">Logo</div>
    <div class="menu">Menu</div>
    <div class="konten">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
        Sit inventore fuga nulla, quae esse, placeat neque voluptate 
        hic assumenda, ad voluptas harum minus! Quam a consectetur 
        deserunt, voluptatibus reiciendis iste.
    </div>
</body>
</html>

Maka didapat hasil tampilan pada browser sebagai berikut:

MenuLogo

Style body untuk height diberi nilai 2000px agar window dapat scrolling. Kalo dilakukan scrolling ke bawah maka logo, menu dan konten akan menghilang ke atas. Artikel ini akan membahas bagian menu menjadi static setelah proses scrolling. Untuk itu diperlukan sebuah class CSS yang berisi style position static. Kode CSS sebagai berikut :

.fixed-menu{position:fixed;top:0;left:0;}

Kemudian diperlukan bantuan jQuery untuk menentukan kapan class .fixed-menu diterapkan pada menu serta kapan dihilangkan dari menu. Kode jQuery yang digunakan adalah:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
    $("document").ready(function($){
        var menu = $('.menu');

        $(window).scroll(function () {
            if ($(this).scrollTop() > 120) {
                menu.addClass("fixed-menu");
            } else {
                menu.removeClass("fixed-menu");
            }
        });
    });
</script>

Kode lengkap dari program Menu menjadi Static setelah Scrolling adalah:

<html>
    <head>
        <title>Menu Static</title>
        <style type="text/css">
            body{
                margin: 0px;padding:0px;height:2000px;
            }
            .logo{background-color: blue;width:100%;height:60px;}
            .menu{background-color: green;width:100%;height:40px;}
            .fixed-menu{position:fixed;top:0;left:0;}
        </style>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script>
            $("document").ready(function($){
                var menu = $('.menu');

                $(window).scroll(function () {
                    if ($(this).scrollTop() > 120) {
                        menu.addClass("fixed-menu");
                    } else {
                        menu.removeClass("fixed-menu");
                    }
                });
            });
        </script>
    </head>
<body>
    <div class="logo">Logo</div>
    <div class="menu">Menu</div>
    <div class="konten">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
        Sit inventore fuga nulla, quae esse, placeat neque voluptate
        hic assumenda, ad voluptas harum minus! Quam a consectetur
        deserunt, voluptatibus reiciendis iste.
    </div>
</body>
</html>

Selamat mencoba dan modifikasi lagi agar lebih baik hasilnya.

Be the first to comment

Leave a Reply

Your email address will not be published.


*