Fixed Header when the Div above is scrolled past

Question

I have this setup so that when the page is scrolled 400px the #headermenu becomes fixed. However the div above this one will have a variable height depending on the screen size.

I need the JS to make the #headermenu become fixed when the bottom of the div above it(#mixedheightheader) has reached the top of the window.

JSFIDDLE

Thanks in advance for you help

<div id="mixedheightheader"></div>

 $(function() {    $('#headermenu'); }); $(window).scroll(function() {    if ($(document).scrollTop() < 400)     {        if ($('#headermenu'))         {            $('#headermenu');            $('#headermenu').stop().css({ top: '0', position: 'relative' });        }    }    else     {        if ($('#headermenu'))         {            $('#headermenu');            $('#headermenu').stop().css({ top: '0', position: 'fixed' });        }      } }); 

 body { height: 3000px } #headermenu { width: 100%; background: black; min-height: 100px; } #mixedheightheader { top: 0; bottom: 0; width: 100%; height: 100vh; min-height: 200px; overflow: hidden; background: grey; clear: both; } #below { width: 100%; background: darkgrey; height: 100px; position: relative; z-index: -1; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="mixedheightheader"></div> <div id="headermenu"></div> <div id="below"></div> 

Answer 1

I have updated you fiddle:

https://jsfiddle.net/yLon2oj3/11/

$(function() {    
  var isFixed = false; //This is to not fix if already fixed and reverse

    $(window).scroll(function() {
    var mixedHeightHeader = $('#mixedheightheader');
    //This uses the offset top position and the height to calculate the bottom of your variable header
    var mixedHeightHeaderBottom = mixedHeightHeader.offset().top + mixedHeightHeader.height();
    var headerMenu = $('#headermenu');


    if ($(document).scrollTop() < mixedHeightHeaderBottom && isFixed)       {        
        if (headerMenu) {                  
        headerMenu.css({
            top: '0',
            position: 'relative'
        });  
        isFixed = false;
        //this is to remove the placeholder space of the fixed top nav, when its not fixed to top
        mixedHeightHeader.css('margin-bottom', '0');
      }    
    }    
    else  if ($(document).scrollTop() > mixedHeightHeaderBottom && !isFixed)   {        
      if (headerMenu) {                      
        headerMenu.css({
          top: '0',
          position: 'fixed'
        });
        //This holds the position that was occupied by the fixed top nav when it was a relative element, because its now taken out of the flow.
        mixedHeightHeader.css('margin-bottom', headerMenu.height() + 'px');
      }
      isFixed = true;
    }
    });

});