Navbar on Scroll, Membuat Animasi Navbar Saat Scroll Up & Scroll Down

Admin・ 26 Maret 2021

11 min read ・ 9797 views

Navbar on Scroll - Pada kesempatan kali ini, Laros akan membagikan artikel web design dengan topik bagaimana cara membuat animasi navbar saat scroll up dan scroll down. Pada percobaan ini, kita akan membuat animasi dengan menyembunyikan atau menghilangkan navbar saat kita scroll ke bawah dan memunculkan navbar lagi saat kita scroll ke atas.

Pada percobaan membuat animasi navbar on scroll kali ini, kita akan mencoba dengan dua cara, yang pertama membuatnya dengan vanilla javascript sederhana dan yang kedua menggunakan navonscroll.js dari kmanadkat.github.io.

Membuat animasi Navbar on Scroll

Navbar on Scroll cara pertama

Kita coba membuat animasi navbar saat scroll up dan scroll down dengan cara pertama terlebih dahulu.

<!doctype html>
<html lang="en">
    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- Bootstrap CSS -->
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
        <style>
            body {
            min-height: 75rem;
            padding-top: 4.5rem;
            }
        </style>
        <title>Nav on Scroll!</title>
    </head>
    <body>
        <nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top" id="demo1Navbar">
            <div class="container-fluid">
                <a class="navbar-brand" href="#">Navbar</a>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                        <li class="nav-item">
                            <a class="nav-link active" aria-current="page" href="#">Home</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Link</a>
                        </li>
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                            Dropdown
                            </a>
                            <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                                <li><a class="dropdown-item" href="#">Action</a></li>
                                <li><a class="dropdown-item" href="#">Another action</a></li>
                                <li>
                                    <hr class="dropdown-divider">
                                </li>
                                <li><a class="dropdown-item" href="#">Something else here</a></li>
                            </ul>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
                        </li>
                    </ul>
                    <form class="d-flex">
                        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
                        <button class="btn btn-outline-success" type="submit">Search</button>
                    </form>
                </div>
            </div>
        </nav>
        <main class="container">
            <div class="bg-light p-5 rounded">
                <h1>Navbar example</h1>
                <p class="lead">This example is a quick exercise to illustrate how fixed to top navbar works. As you scroll, it will remain fixed to the top of your browser’s viewport.</p>
                <a class="btn btn-lg btn-primary" href="/docs/5.0/components/navbar/" role="button">View navbar docs &raquo;</a>
            </div>
        </main>
        <div class="container mt-3">
            <div class="row">
                <div class="col-sm-6 mb-2">
                    <div class="card">
                        <div class="card-body">
                            <h5 class="card-title">Special title treatment</h5>
                            <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
                            <a href="#" class="btn btn-primary">Go somewhere</a>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6 mb-2">
                    <div class="card">
                        <div class="card-body">
                            <h5 class="card-title">Special title treatment</h5>
                            <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
                            <a href="#" class="btn btn-primary">Go somewhere</a>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6 mb-2">
                    <div class="card">
                        <div class="card-body">
                            <h5 class="card-title">Special title treatment</h5>
                            <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
                            <a href="#" class="btn btn-primary">Go somewhere</a>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6 mb-2">
                    <div class="card">
                        <div class="card-body">
                            <h5 class="card-title">Special title treatment</h5>
                            <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
                            <a href="#" class="btn btn-primary">Go somewhere</a>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6 mb-2">
                    <div class="card">
                        <div class="card-body">
                            <h5 class="card-title">Special title treatment</h5>
                            <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
                            <a href="#" class="btn btn-primary">Go somewhere</a>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6 mb-2">
                    <div class="card">
                        <div class="card-body">
                            <h5 class="card-title">Special title treatment</h5>
                            <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
                            <a href="#" class="btn btn-primary">Go somewhere</a>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6 mb-2">
                    <div class="card">
                        <div class="card-body">
                            <h5 class="card-title">Special title treatment</h5>
                            <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
                            <a href="#" class="btn btn-primary">Go somewhere</a>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6 mb-2">
                    <div class="card">
                        <div class="card-body">
                            <h5 class="card-title">Special title treatment</h5>
                            <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
                            <a href="#" class="btn btn-primary">Go somewhere</a>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6 mb-2">
                    <div class="card">
                        <div class="card-body">
                            <h5 class="card-title">Special title treatment</h5>
                            <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
                            <a href="#" class="btn btn-primary">Go somewhere</a>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6 mb-2">
                    <div class="card">
                        <div class="card-body">
                            <h5 class="card-title">Special title treatment</h5>
                            <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
                            <a href="#" class="btn btn-primary">Go somewhere</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Bootstrap Bundle with Popper -->
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
    </body>
</html>

Disini sudah saya siapkan starter template yang dibuat dengan bootstrap. Buat file html baru dan beri nama misal index.html, kemudian copy semua kode di atas dan paste pada file index.html yang baru dibuat tersebut.

File html tadi akan menghasilkan tampilan seperti gambar di atas. Disini kita memiliki navbar fixed top, jumbotron dan card, namun saat kita scroll ke bawah atau scroll ke atas, navbar masih belum bisa berubah atau hide and show. Untuk membuat animasi navbar hide atau disembunyikan saat kita scroll down atau scroll ke bawah dan menampilkan lagi saat kita scroll up atau scroll ke atas, kita perlu menambahkan kode javascript sedikit.

<script>
            var prevScrollpos = window.pageYOffset;
            window.onscroll = function() {
            var currentScrollPos = window.pageYOffset;
              if (prevScrollpos > currentScrollPos) {
                document.getElementById("demo1Navbar").style.top = "0";
              } else {
                document.getElementById("demo1Navbar").style.top = "-50px";
              }
              prevScrollpos = currentScrollPos;
            }
</script>

Tambahkan kode javascript di atas pada file index.html atau lebih tepatnya di atas tag </body>. OK, kita sudah berhasil membuat animasi navbar on scroll yaitu hide atau menyembunyikan navbar saat scroll down atau saat kita scroll ke bawah dan show atau menampilkan saat kita scroll up atau scroll ke atas.

Source: https://codepen.io/hilmihidayat/pen/poRgOLv

Navbar on Scroll cara kedua

See the Pen <a href="https://codepen.io/hilmihidayat/pen/MWJKqgM"> nav on scroll</a> by Hilmi Hidayat (<a href="https://codepen.io/hilmihidayat">@hilmihidayat</a>) on <a href="https://codepen.io">CodePen</a>.

Masih menggunakan starter template yang sama, namun pada percobaan membuat animasi navbar on scroll atau animasi navbar hide atau disembunyikan saat scroll down atau kita scroll ke bawah dan show atau menampilkan navbar sata kita scroll up atau scroll ke atas cara kedua, kita akan menggunakan navonscroll.js dari kmanadkat.github.io. Silahkan kunjungi web resmi dari navonscroll di link https://kmanadkat.github.io/navonscroll/ terlebih dahulu. Cari link download zip, lalu silahkan klik download. Jika sudah selesai proses download, silahkan extract kemudian copy file navonscroll.js dan paste di folder dimana kita meletakkan atau membuat file index.html tadi (letakkan sejajar dengan index.html).

<script src="navonscroll.js"></script>
        <!-- Function Call --> 
<script>
          hide_on_scroll({
            nav_id : 'demo1Navbar'
          });
</script>

Kemudian copy kode di atas, lalu paste di index.html dibagian sebelum tag </body>. Jika sudah save dan lihat apa yang terjadi pada tampilan index.html. Animasi navbar hide & show lebih smooth dan cantik saat menyembunyikan dan menampilkan navbar ketika di scroll up atau scroll down. Dengan menggunakan navonscroll.js, kita tidak perlu lagi menambahkan tambahan css.

// hide_on_scroll function with DEFAULT parameter VALUES
hide_on_scroll({
  nav_id               : '',      // you must specify this for plugin to work
  nav_offset           : 200,     // after how much y-scroll, nav should hide onscroll down
  nav_position         : 'top',   // you want to see nav bar at 'top' or 'bottom', default 'top'
  hide_onscroll_mobile : false,   // disables hide-onscroll for mobile, you can set it to true
  mobile_width         : 576      // viewport width below which it disables hide-onscroll if above is false
});

By default, seperti ini lah setup hide on scroll dengan navonscroll.js. Pada nav_id, kita bisa isikan dengan id navbar yang telah didefinisikan. nav_offset, setelah angka y-scroll ke berapa navbar harus di hide atau disembunyikan saat scroll down atau scroll ke bawah. nav_position, kita bisa sesuaikan dengan keinginan dan kebutuhan kita. Jika kita menggunakan navbar bottom, silahkan ganti nav_position : 'top' dengan nav_position : 'bottom'. hide_onscroll_mobile, secara default pada tampilan mobile, navbar tetap akan menghilang saat kita scroll down ke bawah dan akan tampil lagi saat kita scroll up atau scroll ke atas. Namun, disini kita juga bisa me-nonaktifkan animasi navbar on scroll pada tampilan mobile dengan mengganti hide_onscroll_mobile : false menjadi hide_onscroll_mobile : true.

Demikianlah artikel web design dengan topik bagaimana cara membuat animasi navbar on scroll atau animasi navbar hide atau menghilang saat kita scroll down atau scroll ke bawah dan show atau muncul lagi ketika kita scroll up atau scroll ke atas. Langkah-langkah membuat animasi navbar on scroll bisa dibilang sangat mudah. Kita bisa menggunakan plugin yang banyak sekali tersedia seperti navonscroll.js. Jika ada pertanyaan atau kritik, saran, masukan atau apapun itu yang ingin didiskusikan, silahkan tulis komentar di bawah ini.

See you.

Bootstrap Animation

Artikel Sebelumnya

Integrasi Ckeditor dengan Laravel File Manager di...

Artikel Selanjutnya

Belajar Membuat REST API CRUD dengan Lumen 8

Tinggalkan Komentar

Loading Comments

Favorit See All

Cara Mengatasi Error XAMPP: MySQL shutdown unexpectedly
23 Oktober 2021 65579 views
Laravel 8: REST API Authentication dengan Sanctum
17 September 2021 31644 views
Tutorial CRUD (Create, Read, Update & Delete) Codeigniter 4 dengan Bootstrap
14 Oktober 2021 29582 views
Membuat REST API CRUD di Laravel 8 dengan Sanctum
18 September 2021 28216 views
Contoh Cara Menggunakan Sweet Alert di Laravel 8
27 Agustus 2021 27270 views