Content disappears under fixed element when fixed element stays on top when scrolling down the page

Question

I have a problem with some content, which disappears under the fixed element when page is being scrolled down. The JS fiddle below shows it very well. Basically the content above number 7 jumps behind the fixed navigation element. I assume there must be a simple {padding-top:100px;} applied for body through js after sticking the header on top.

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

and finally JS:

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

Thank you for your help

Answer 1

Need to set top margin to #wrapper element toggling wrapperBelow class on scroll

 $(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>