Fixed Header, wenn der Div oben ist vorbei gescrollen

Question

Ich habe diese Einstellung, so dass wenn die Seite 400px gescrollt wird #headermenu wird behoben. Das div über diesem wird jedoch abhängig von der Bildschirmgröße eine variable Höhe haben.

Ich brauche die JS, um das #headermenu zu fixieren, wenn der untere Teil des div darüber (#mixedheightheader) den oberen Rand des Fensters erreicht hat.

JSFIDDLE

Vielen Dank im Voraus für Sie

<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

ich Sie aktualisiert helfen Geige:

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

});