滚动上方的Div时固定标题

Question

我有此设置，以便在页面滚动400px时#headermenu变得固定。 但是，根据屏幕尺寸，该区域上方的div高度将有所变化。

当上面的div的底部（#mixedheightheader）到达窗口顶部时，我需要JS使#headermenu变得固定。

JSFIDDLE

预先感谢您的帮助

<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

我已经更新了你的小提琴：

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

});