短页时，粘页眉会导致页 "jumps"

Question

我已经设法制作了一个工作正常的粘性页眉，除此之外，当页面不够长时它会保留 "jumping"。如何让它正常工作？这是一些代码，jsfiddle 和最重要的：一个视频 - 显示问题所在。如果您的屏幕分辨率较小，JS fiddle 可能不会显示。请看视频。如何解决这个问题？我运行没主意了。

请看这个视频：video here

这里也有代码：

<div id="ontop">floating heading</div>
<header>sticky heading</header>
<div id="wrapper"> 
    1<br/>2<br/>3<br/>4<br/>5<br/>6<br/>7<br/>8<br/>9<br/>10<br/>
</div>

#ontop {width:100%; height:80px; background-color:yellow;}
header {width:100%; height:400px; background-color:lightgrey; }
#wrapper {background-color:lightblue; height:200px;}

.navfixed {position: fixed; top: 0px; z-index: 100; width:100%; display:block; margin-bottom:120px; } 
.wrapperBelow{margin-top:22px;}


$(function () {
    var elem = $('header'),
        wrapperElem = $('#wrapper'),
        elemTop = elem.offset().top;
    $(window).scroll(function () {
        elem.toggleClass('navfixed', $(window).scrollTop() > elemTop);
         wrapperElem.toggleClass('wrapperBelow', $(window).scrollTop() > elemTop);
    }).scroll();
});

和fiddle：fiddle

Answer 1

DEMO

HTML:

<div id="header"></div>
<div id="content"></div>
<div id="stickyheader"></div>
<div id="content2"></div>
<div id="footer"></div>

CSS:

body{
    margin:0;
    padding:0;
}

#header{
   width: 100%;
   height: 100px;
   background: gold;    
}

.headerstuck{
    position:fixed;
    top: 0;
}

#stickyheader{
   width: 100%;
   height: 100px;
   background: DarkOrange;
}

#content{
   width: 100%;
   height: 200px;
   background-color: #ccc;

}

#content2{
   width: 100%;
   height: 700px;
   background-color: #ccc;

}

#footer{
   width: 100%;
   height: 250px;
   background: DodgerBlue;

}

JavaScript/jQuery:

$(window).scroll(function() {
if ($(this).scrollTop() > 300){  
    $('#stickyheader').addClass("headerstuck");
  }
  else{
    $('#stickyheader').removeClass("headerstuck");
  }
});

//编辑---- 修复了将 header div 更改为 fixed:

时内容向上移动的问题

DEMO2

HTML:

<div id="header">1<br/>2<br/>3<br/>4</div>
<div id="content">1<br/>2<br/>3<br/>4</div>
<div id="stickyheader">1<br/>2<br/>3<br/>4</div>
<div id="content2">1<br/>2<br/>3<br/>4</div>
<div id="footer">1<br/>2<br/>3<br/>4</div>

CSS:

body{
    margin:0;
    padding:0;
}

#header{
   width: 100%;
   height: 100px;
   background: gold;    
}

#stickyheader{
   position:absolute;
   top:300px;
   width: 100%;
   height: 100px;
   background: DarkOrange;
}

#content{
   width: 100%;
   height: 200px;
   background-color: #ccc;

}

#content2{
   margin-top:100px;
   width: 100%;
   height: 700px;
   background-color: white;

}

#footer{
   width: 100%;
   height: 250px;
   background: DodgerBlue;

}

JavaScript/jQuery:

$(window).scroll(function() {
if ($(this).scrollTop() > 300){  
    $("#stickyheader").css({"position":"fixed", "top":"0"});
  }
  else{
    $("#stickyheader").css({"position":"", "top":""});
  }
});

Answer 2

如果您不想在您的内容区域设置最小高度，试试这个。
body {min-height: 75rem;}

短页时，粘页眉会导致页 "jumps"

Sticky header causes page "jumps" when short page

css

jquery

header