Fixed position jQuery waypoint right under first waypoint and not the top

Question

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: http://cuberapp.com/ any help appreciated thanks.

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;            
        }
         });

Answer 1

I'm still not sure how the elements on your page are positioned. Some more information would be helpful (Is Cuber an example or the page you are working on?). Still, this may be what you need:

http://jsfiddle.net/Y4Yks/41/

jQuery

function positionMenu(){
    if ( $(window).scrollTop() >= $('#image').height() - $('#bluebar').height() ) {
        $('#menu').css({'position': 'fixed', 'top' : $('#bluebar').height() + 'px'});
    } else {
        $('#menu').css({'position': 'static'});
    }
}


    positionMenu(); // position once when ready

    $(window).scroll(function () { 
    positionMenu(); // position every time the user scrolls
    });

HTML

<div id="bluebar"></div>
<div id="image"></div>
<div id="menu"></div>

CSS

div {
    width: 100%; }

#bluebar {
    background: navy; 
    height: 80px;
    position: fixed;
    top: 0; }

#image {
    background: #ddd; 
    height: 300px; }

#menu {
    background: red; 
    height: 80px; }