javascript - 当向下滚动页面时固定元素停留在顶部时，内容在固定元素下消失

Question

我的一些内容有问题，当向下滚动页面时，这些内容在固定元素下消失了。下面的 JS fiddle 很好地展示了它。基本上，7 号以上的内容会跳到固定导航元素后面。我假设必须有一个简单的 {padding-top:100px;} 在将标题贴在顶部后通过 js 应用于正文。

JSfiddle here

<div id="ontop">something</div>
<header>navigation - stays on top when scrolling</header>
<div id="wrapper"> 
    1<br/>2<br/>3<br/>4<br/>5<br/>6<br/>
    7 - wrapper disappears above this point while scrolling down<br/> 
    8<br/>9<br/>10<br/>
</div>

CSS:

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

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

最后是 JS:

$(function () {
    var elem = $('aside'),
        elemTop = elem.offset().top;
    $(window).scroll(function () {
        elem.toggleClass('fixed', $(window).scrollTop() > elemTop);
    }).scroll();
});

谢谢你的帮助

Answer 1

需要将上边距设置为 #wrapper 元素在滚动时切换 wrapperBelow 类

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

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

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="ontop">something</div>
<header>navigation - stays on top when scrolling</header>
<div id="wrapper"> 
    1<br/>2<br/>3<br/>4<br/>5<br/>6<br/>
    7 - wrapper disappears before this while scrolling<br/> 
    8<br/>9<br/>10<br/>
</div>