Fixed Nav Bar With Logo

I think the easiest way to build the nav bar for your site will be to build three columns and divide the widths up so there's ample room for your links and for your logo in the center. You can use margin or possibly the position properties to adjust the location of the buttons so they line up where you want in relation to the logo. Here's an example of a nav bar that fixes to the top of the page when you scroll down, and that includes a container for a logo in the center of a group of links. Try to build your structure in a similar fashion and we can work through any CSS questions you have during lab.

There is javascript required to fix the bar to the top on scroll down and then release it on scroll up. We can go through this code in detail during lab:

  (function() {
  window.onload = function() {
    var menu = document.getElementById('nav');
    var init = menu.offsetTop;
    var docked;

    window.onscroll = function() {
      if (!docked && (menu.offsetTop - scrollTop() < 0)) {
        menu.style.top = 0;
        menu.style.position = 'fixed';
        menu.className = 'docked';
        docked = true;
        console.log('docked = true');
      } else if (docked && scrollTop() <= init) {
        menu.style.position = '';
        menu.style.top = init + 'px';
        menu.className = menu.className.replace('docked','');
        docked = false;
        console.log('docked = false');
      }
    };
  };

  function scrollTop() {
   return document.body.scrollTop || document.documentElement.scrollTop; 
  }
})();


551 1 0