Home » Programming » Framework » Bootstrap Tutorial: Navbar Fixed Top Transition Scrolling
navbar fixed top

Bootstrap Tutorial: Navbar Fixed Top Transition Scrolling

Membuat Navbar Fixed Top dan Berganti Warna Saat Scrolling

Membuat navbar fixed top responsive dan bisa berganti warna saat di scroll menggunakan bootstrap 4, kita bisa membuat sebuah menu navigasi fixed top responsive di bootstrap 4 dengan mudah

Caranya kita hanya perlu pergi ke dokumentasi bootstrap kemudian cari navbar disitu terdapat cara membuatnya dan supaya posisinya tetap konsisten di atas halaman anda perlu menambahkan “fixed-top” pada class navbar

Ada pula atribut lain berupa class yang bisa digunakan untuk menghias navbar misalnya “bg-primary”  untuk mengganti warna background dan class lainnya

Dan untuk artikel kali ini wowotek akan berbagi tutorial cara membuat navbar fixed top yang bisa berganti warna saat pengunjung melakukan scrolling halaman

bagaimana caranya? yuk langsung kita mulai saja

navbar fixed top

Cara Membuat Navbar Fixed Transition on Scrolling

Untuk membuatnya silahkan anda ikuti langkah-langkah mudah berikut ini.

  1. Siapkan Bootstrap Framework

    Yang pertama silahkan anda download compiled bootstrap framework dari situs resminya, kemudian ekstrak

  2. Buat folder baru

    Selanjutnya silahkan anda buat folder baru bernama “navbar”, lalu pindahkan hasil ekstrak tadi ke folder tersebut

  3. Buat file index.html

    Langkah ketiga buatlah sebuah file baru bernama index.html di dalam folder “navbar”.

  4. Buka index.html dengan html teks editor

    Langkah selanjutnya silahkan anda buka index.html menggunakan html teks editor lalu ketikkan kode dibawah ini di antara tag <body> disini… </body> :

    <div class="nav-menu fixed-top">
    
    <nav id="header" class="navbar navbar-light navbar-expand-lg navbar-fixed-top">
    
    <a class="navbar-brand text-white" href="#">Navbar</a>
    
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 mr-auto">
    
    <li class="nav-item active">
    
    <a class="nav-link text-white" href="#">Home <span class="sr-only">(current)</span></a>
    
    </li>
    
    <li class="nav-item">
    
    <a class="nav-link text-white" href="#">Link</a>
    
    </li>
    
    <li class="nav-item">
    
    <a class="nav-link disabled text-white" href="#">Disabled</a>
    
    </li>
    
    </ul>
    
    </div>
    
    </nav>
    
    </div>
    
    <div class="container">
    
    <div class="menu">
    
    <h1>Scrool Down!!!</h1>
    
    </div>
    
    <div class="menu">
    
    <h1>Scrool Down!!!</h1>
    
    </div>
    
    <div class="menu">
    
    <h1>Scrool Down!!!</h1>
    
    </div>
    
    </div>

Scroll ke atas kemudian cari tag <head>, selanjutnya silahkan anda ketikkan kode css berikut diantara tag <head> disini… </head> :

body{

background: rgb(71, 116, 201);

}

.navbar-brand {

font-size: 24px;

}




.navbar-container {

padding: 20px 0 20px 0;

}




.navbar.navbar-fixed-top.fixed-theme {

background-color:  rgb(77, 201, 170);

box-shadow: 0 0 5px rgba(0,0,0,.8);

}




.navbar-brand.fixed-theme {

font-size: 18px;

}




.navbar-container.fixed-theme {

padding: 0;

}




.navbar-brand.fixed-theme,

.navbar-container.fixed-theme,

.navbar.navbar-fixed-top.fixed-theme,

.navbar-brand,

.navbar-container{

transition: 0.8s;

-webkit-transition:  0.8s;

}

.menu{

background: rgb(18, 68, 161);

margin-top: 100px;

width: 100%;

height: 300px;

color: white;

text-align: center;

}

h1{

letter-spacing: 1px;

font-size: 44px;

font-weight: 400;

padding-top: 120px;

}

Includekan file css dan js bootstrap diantara tag <head> disini… </head>:

3

Langkah berikutnya ketikkan kode javascript, caranya silahkan anda Scroll ke bawah sampai tag </body> kemudian ketikkan kode berikut diatasnya <body> …disini</body> :

<script type="text/javascript">

$(document).ready(function(){





var myNavBar = {




flagAdd: true,




elements: [],




init: function (elements) {

this.elements = elements;

},




add : function() {

if(this.flagAdd) {

for(var i=0; i < this.elements.length; i++) {

document.getElementById(this.elements[i]).className += " fixed-theme";

}

this.flagAdd = false;

}

},




remove: function() {

for(var i=0; i < this.elements.length; i++) {

document.getElementById(this.elements[i]).className =

document.getElementById(this.elements[i]).className.replace( /(?:^|\s)fixed-theme(?!\S)/g , '' );

}

this.flagAdd = true;

}




};





myNavBar.init(  [

"header",

"header-container",

"brand"

]);





function offSetManager(){




var yOffset = 0;

var currYOffSet = window.pageYOffset;




if(yOffset < currYOffSet) {

myNavBar.add();

}

else if(currYOffSet == yOffset){

myNavBar.remove();

}




}




window.onscroll = function(e) {

offSetManager();

}




offSetManager();

});

</script>

Jika sudah silahkan anda tekan ctrl + s untuk simpan project.

  1. Jalankan index.html

Langkah terakhir silahkan anda jalankan file index.html di browser seperti google chrome, Mozilla atau lainnya kemudian anda bisa scroll ke bawah project tersebut maka akan seperti berikut hasilnya:

navbar fixed top

Download Source Code


Informasi

Nama : Navbar scrolling

Format : rar

Ukuran : 200 KB

Harga : Gratis

Download


Nah begitulah cara membuat navbar fixed top transition on scrolling responsive, semoga tutorial ini bermanfaat untuk kita semua.

Baca :  Membuat Modal Login & SignUp/Daftar Bootstrap 4

Tinggalkan Komentar

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *