jQuery Waypoints toggle sticky-wrapper height

Question

http://jsfiddle.net/Luter/

When scrolling down the page, the slide up is fired but the sticky wrapper does not adjust to the missing height of the slid up element. Is stays there and keeps the content from coming up. How can I adjust the height of the sticky-wrapper according to the height of the slid up elements?

http://jsfiddle.net/Luter/1/ Comment out the first //$('.option-wrap').slideToggle(); (case b) click on Menu and scroll down. The Menu element this time is only sticky when it has scrolled past the height of the Header. Again, how could I adjust the sticky wrapper height for the missing Header, so that the Menu is stuck immediately?

Do these two cases have to do with offset or with refreshing the sticky wrapper? I think, since Waypoints correctly measures the height of the initial state of the whole Menu/window element the sticky wrapper keeps its height even when Options are slid up partly or when the Header is hidden.

I am looking for a way to pass the smaller sticky wrapper height to Waypoints according to the slide/visible/toggle state of the Options element or hidden Header element.

I have trouble wrapping my head round how to pass the missing height of the slid up or hidden elements to Waypoints so that the content always nicely flows under the Menu.

I have checked tutsplus, Waypoints Docs, Sticky Elements, stack different-offset-for-jquery-waypoint, stack how-to-make-jquery-waypoints-plugin-fire-when and tried many different combinations but simply do not get there.

Can you please help me? Thank you for your time, I do value the Waypoints plugin highly and learning to correctly work with it with your help would be great. Thank you.

HTML

<div id='header'>HEADER</div>
<div id='menu-wrap'>
    <div id='menu'>MENU</div>
    <div class='option-wrap'>
        <div id='opt1'>OPTION 1</div>
        <div id='opt2'>OPTION 2</div>
        <div id='opt3'>OPTION 3</div>
        <div id='opt4'>OPTION 4</div>
    </div>
</div>
<div id='content'>CONTENT</div>

jQuery

$('#menu-wrap').waypoint('sticky');

$(function() {                     
  $('#menu').waypoint(             
    function() {
      console.log("Waypoint reached.");
        //case b
      //$('.option-wrap').slideToggle();
    }
  )
});

$("#menu").click(function(){

    $('.option-wrap').slideToggle();

    $('#header').slideToggle('slow');

});

CSS

#header, #menu, #opt1, #opt2, #opt3, #opt4, #opt5, #content {
    width: 100%;
    line-height: 2em;
    font-size: 200%;
    text-align: center;
}

#header {
    background: #e74c3c;
}

#menu {
    background: #2ecc71;
}

#opt1 {
    background: #f39c12;
}

#opt2 {
    background: #9b59b6;
}

#opt3 {
    background: #95a5a6;
}

#opt4 {
    background: #34495e;
}

#content {
    background: #2980b9;
    height: 1000px;
}

#menu-wrap.stuck {
    position: fixed;
    top: 0;
    width: 100%;
}

Answer 1

http://jsfiddle.net/Luter/5/

Adds up though I am not sure if the same could be achieved with Waypoints itself.

Please do let me know if you have a better/nicer/smoother solution.

Thank you.

var menuWrapHeight = $('#menu-wrap').outerHeight();
console.log (menuWrapHeight);
var menuHeight = $('#menu').outerHeight();
console.log (menuHeight);
var optionWrapHeight = $('.option-wrap').outerHeight();
console.log (optionWrapHeight);

$('#menu-wrap').waypoint('sticky');

$(function() {                     
  $('#menu').waypoint(             
    function() {
      console.log("Waypoint reached.");
      //$('.option-wrap').slideToggle();
        var optionWrapHeight = $('.option-wrap').outerHeight();
        console.log (optionWrapHeight);
        var newStickyWrapperHeight = menuWrapHeight - optionWrapHeight;
        console.log ('newStickyWrapperHeight', newStickyWrapperHeight);
        $('.sticky-wrapper').css('height', newStickyWrapperHeight);
    }
  )
});

$('#menu').click(function(){

    $('.option-wrap').slideToggle().toggleClass('opened');

    var isVisible = $( '.option-wrap' ).is( ".opened" );
    // var menuWrapHeight = $('#menu-wrap').outerHeight();

    if (isVisible === true ){
        var newStickyWrapperHeight = menuWrapHeight + optionWrapHeight;
        $('.sticky-wrapper').css('height', newStickyWrapperHeight);
    }

    else {

        var newStickyWrapperHeight = menuHeight;
        $('.sticky-wrapper').css('height', newStickyWrapperHeight);

    }    
});

Answer 2

http://jsfiddle.net/Luter/8/

Much smoother without changing the CSS! The logic was to go after the stuck state of the wrapped element and only then set the .sticky-wrapper to the Menu height in order to avoid the space that comes from the sliding Options element under the Menu. They slide but of course the .sticky-wrapper does not care if they do and does its work like Caleb told it. Hence the need to change the .sticky-wrapper's height to the height of the Menu. Though this only should be done when the Menu wrapping element has the stuck class.

var menuHeight = $('#menu').outerHeight();
console.log (menuHeight);

$('#menu-wrap').waypoint('sticky');

$('#menu').click(function(){
    $('.option-wrap').slideToggle();    
        if ( $('#menu-wrap').hasClass('stuck')) {
            console.log('stuck');
            console.log ('.sticky.wrapper height stuck before change:', $('.sticky-wrapper').height());
            $('.sticky-wrapper').css('height', menuHeight);
          console.log ('.sticky.wrapper height stuck after change:', $('.sticky-wrapper').height());            
        }
});

If this can also somehow be achieved with

$.waypoints('refresh');

when the Menu passes the waypoint, please do let me know.

Any feedback to this way of solving the question is very welcome. Thank you.