Cara Membuat - Making a simple sticky menu bar

Making a simple sticky menu bar

Pernah lihat menu bar seperti di cssawards.net? Dalam posting kali ini, saya akan menunjukkan pada Anda bagaimana cara membuat sebuah sticky menu bar mudah dengan hanya beberapa baris kode Javascript dan jQuery.

sticky menu navigasi bar adalah bar yang diletakkan di tempat aslinya di #container pada template, tetapi ketika Anda mulai scroll ke bawah halaman yang panjang, bar itu akan menempel terus di bagian atas jendela browser, berikut ini contoh gambarnya:

Gb.1 - Contoh sebelum di scroll

Gb.2 - Contoh setelah di scroll

HTML:

<div id="wrapper">
 <header>
  <h1>Simple Sticky Menu Bar</h1>
 </header>
 <nav>
  Home | Menu 1 | Menu 2 | Menu 3
 </nav>
 <div id="content">
  <p>Website content here.</p>
 </div>
</div>

CSS:

body {
 font-family:Arial, Helvetica, sans-serif;
 margin:0;
 background:#ddd;
}
#wrapper {
 width:940px;
 margin: 0 auto;
}
header {
 text-align:center;
 padding:50px 0;
}
nav {
 background:#333;
 color:#fff;
 height: 30px;
 width:100%;
 line-height:30px;
 position: relative;
 left:0;
 text-indent:10px;
}
#content {
 background: #fff;
 height: 1500px; /* presetting the height */
 box-shadow: 0 0 5px rgba(0,0,0,0.3);
 overflow:hidden;
}
.fixed {
 position:fixed;
}

JQUERY

$(document).ready(function() {
 
 //Calculate the height of 

 //Use outerHeight() instead of height() if have padding
    var aboveHeight = $('header').outerHeight();
 
 // when scroll
    $(window).scroll(function(){
  
  //if scrolled down more than the header's height
        if ($(window).scrollTop() > aboveHeight){
   
   // if yes, add "fixed" class to the 

   // add padding top to the #content (value is same as the height of the nav)
            $('nav').addClass('fixed').css('top','0').next().css('padding-top','30px');
        } else {
   
   // when scroll up or less than aboveHeight, remove the "fixed" class, and the padding-top
            $('nav').removeClass('fixed').next().css('padding-top','0');
        }
    });
});

gampang kan :D

• Tweet
• Share
• Share
• Share
• Share

About Admin

This is dummy text. It is not meant to be read. Accordingly, it is difficult to figure out when to end it. But then, this is dummy text. It is not meant to be read. Period.

Related Post