title: Fixed position jQuery waypoint right under first waypoint and not the top
body: <p>I want the navigation bar the be fixed position whenever 
  it touches the that dark blue rectangle and not when it reaches the 
  brower top you can  view what i am after here: <a href="http://cuberapp.com/" rel="nofollow">http://cuberapp.com/</a> any 
  help appreciated thanks.</p>
  
  <pre><code>jQuery('.wrap_head').waypoint('sticky', {
    stuckClass: 'stuck1',
    offset:'bottom-in-view'
  });                    
  
  //jQuery('.navbar').waypoint('sticky', {
    // stuckClass: 'stuck1',
     //offset: 99
  //});
  
  //initialise Stellar.js
      jQuery(window).stellar();
      //Cache some variables
      var i = 1;
      var nav_container = jQuery(".nav-wrapper");
      var nav = jQuery(".navbar");
  
      var top_spacing = 99;
      var waypoint_offset = 50;
  
      var num = jQuery('li.menu-item').find('a').each(function () {
           jQuery(this).attr('data-slide', i);
           i++;
          });   
  
      mywindow = jQuery(window);
      htmlbody = jQuery('html,body');
  
      //Setup waypoints plugin    
      nav_container.waypoint(function (direction) {   
  
              if (direction === 'down') {
  
                  nav_container.css({ 'height':nav.outerHeight() });      
                  nav.stop().addClass('stuck').css("top",- nav.outerHeight())
  .animate({"top":top_spacing});
  
              }else {
  
                  nav_container.css({ 'height':'auto' });
  
  
  nav.stop().removeClass("stuck")
  .css("top",nav.outerHeight()+waypoint_offset).animate({"top":""});
  
              }
  
      }, {
  offset: function() {
          return $.waypoints('viewportHeight') / 3 - nav.outerHeight()-
  
  waypoint_offset;            
          }
           });
  </code></pre>