Question

How do you recreate a navigation bar like the one found Here

here if you scroll, not only does the navigation bar follow you at the top, but the symbol of the company fades into the navigation bar.

Can someone help or guide me in the right direction please?

Answer 1

I created this:

jsBin demo

jQuery:

var navPos = $('#nav').offset().top;

$(window).scroll(function(){

  var fixIT = $(this).scrollTop() >= navPos;
  var setPos = fixIT ? 'fixed' : 'relative' ;
  var logoSH = fixIT ? 'show' : 'hide' ;
  

  $('#nav').css({position: setPos});
  $('#mini-logo')[logoSH](300);

});

HTML:

 <div id="header">
   
   <h1>Company logo</h1>
   
   <div id="navigation">
     <ul id="nav">
       <li id="mini-logo"><a href="#">LOGO</a></li>
       <li><a href="#">PRODUCT</a></li>
       <li><a href="#">RESOURCES</a></li>
       <li><a href="#">CUSTOMERS</a></li>
       <li><a href="#">SUPPORT</a></li>
       <li><a href="#">COMPANY</a></li>
     </ul>
   </div>
        
  </div>

CSS:

#header{
  background:#eee;
}

#header h1{
  padding:20px;
}

#navigation{
  height:40px;
}
#nav{
  position:relative;
  top:0;
  width:100%;
  list-style:none;
  background:#76A000;
  height:40px;
}

#nav li{  
  float:left;  
}
#nav a{
 text-decoration:none;
  display:block;
  padding:10px 10px;
  color:#fff;
}

#nav li#mini-logo{
  display:none;
  font-weight:bold;
}

The trick is to get the position of our #nav , and scrolling the page do something if the position is smaller than the window scrollTop.
To achieve that smooth effect you have to make sure you have a replacement element for the #nav once we set it’s position to fixed to prevent a ‘jumpy’ effect.
That element is the nav‘s parent #navigation that has the same height as it’s children.