How to create a nav bar that follows and adds logo as you scroll?

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?

score 4 · Accepted Answer · edited Jun 20 '20 at 09:12

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.

@SavionSmith you're welcome! there are some tricks, I hope I covered all in the added description! cheers and lemme know if something is unclear! — Roko C. Buljan, Jan 12 '13 at 06:49
Quick question roXon... if I wanted to start off with no background to the nav and then fade in a background on scroll as the logo comes in... how would I achieve this? Thanks again! — Savion Smith, Jan 12 '13 at 07:26
@SavionSmith you can take a look at css3 transitions, I tried but it's buggy and looks awful. the mini-logo slide efx is than barely visible and recognizable... — Roko C. Buljan, Jan 12 '13 at 07:51

score 0 · Answer 2 · answered Jan 12 '13 at 06:43

0

This is what you are looking for the scrolling part

http://pmbennett.net/2010/02/09/fixed-scrolling-navigation/

to fade in the logo just use: http://api.jquery.com/fadeIn/

inside the else { }

answered Jan 12 '13 at 06:43

Artur Mendes

117
2
8

How to create a nav bar that follows and adds logo as you scroll?

2 Answers2

jsBin demo