Question

我设法做了一个很好的粘性标题，除了事实上，当页面不够长时它会保持“跳跃”。如何让它正常工作？这里有一些代码，jsfiddle和最重要的：一个视频 - 它提出了问题所在。如果你有更小的分辨率屏幕，JS小提琴可能不会显示。请看视频。如何解决这个问题？我没有想法了。

请观看此视频：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

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

// EDIT ---- 修复将标题div更改为固定时向上移动的内容：

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

当短页

2 个答案: