For some reason my content section #ContentContainer is floating up into my nav section #NavContainer. I see the paddings and margins being 0 so I don’t know why this is. I’ve looked at this a lot but can’t find the solution.
#NavContainer is {position:fixed} which removes it from the flow of the page. But the complicating factor is that its height is fluid. If it had a fixed height, you could add padding-top of that same value to #ContentContainer and the top of it would not hide beneath #NavContainer.
It is possible to use JavaScript to pad the top of #ContentContainer as the height of #NavContainer.changes.
That header is rather too big to be a fixed positioned header and you would be better off just removing the position:fixed and letting it behave normally which I think is much nicer anyway.
Fixed positioned headers are fine if they are fixed height and unobtrusive (i.e. a one line header or footer) but large elements are not suitable to be fixed positioned for many reasons - especially usability.
What some people do these days is to let the main header scroll away and then replace it with a smaller fixed header.
Here’s a rough example.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
html, body {
margin:0;
padding:0
}
/* sticky message at top of page */
.header {
margin:0;
border-radius:0;
min-height:50px;
border-bottom:1px solid red;
background:rgb(242,222,222);
padding:1px;
text-align:center;
top:-100px;
}
.fixedElement {
position:fixed;
top:0;
right:0px;
left:0px;
z-index:999;
background:rgba(242,222,222, 0.9);
margin-bottom:0;
-webkit-box-shadow: 2px 3px 3px rgba(0, 0, 0, 0.25);
-moz-box-shadow: 2px 3px 3px rgba(0, 0, 0, 0.25);
box-shadow: 2px 3px 3px rgba(0, 0, 0, 0.25);
-moz-transition:2s all 0s;
-webkit-transition:2s all 0s;
transition:2s all 0s;
}
</style>
</head>
<body>
<div class="header fixit">
<h1>Testing sticky header</h1>
</div>
<p>Some text to scroll</p>
<p>Some text to scroll</p>
<p>Some text to scroll</p>
<p>Some text to scroll</p>
<p>Some text to scroll</p>
<p>Some text to scroll</p>
<p>Some text to scroll</p>
<p>Some text to scroll</p>
<p>Some text to scroll</p>
<p>Some text to scroll</p>
<p>Some text to scroll</p>
<p>Some text to scroll</p>
<p>Some text to scroll</p>
<p>Some text to scroll</p>
<p>Some text to scroll</p>
<p>Some text to scroll</p>
<p>Some text to scroll</p>
<p>Some text to scroll</p>
<p>Some text to scroll</p>
<p>Some text to scroll</p>
<p>Some text to scroll</p>
<p>Some text to scroll</p>
<p>Some text to scroll</p>
<p>Some text to scroll</p>
<p>Some text to scroll</p>
<p>Some text to scroll</p>
<p>Some text to scroll</p>
<p>Some text to scroll</p>
<p>Some text to scroll</p>
<p>Some text to scroll</p>
<p>Some text to scroll</p>
<p>Some text to scroll</p>
<p>Some text to scroll</p>
<p>Some text to scroll</p>
<p>Some text to scroll</p>
<p>Some text to scroll</p>
<p>Some text to scroll</p>
<p>Some text to scroll</p>
<p>Some text to scroll</p>
<p>Some text to scroll</p>
<p>Some text to scroll</p>
<p>Some text to scroll</p>
<p>Some text to scroll</p>
<p>Some text to scroll</p>
<p>Some text to scroll</p>
<p>Some text to scroll</p>
<p>Some text to scroll</p>
<p>Some text to scroll</p>
<script src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript">
function fixedHeaders() {
var el = $(".fixit"),
offset = el.offset(),
elHeight = el.height(),
scrollTop = $(window).scrollTop()
if ((offset.top < scrollTop - el.height())) {
el.fadeOut( "slow", function() {
el.addClass('fixedElement').fadeIn('slow');
});
}
if (scrollTop === 0) {
el.removeClass('fixedElement');
}
}
$(function () {
$(window)
.scroll(fixedHeaders)
.trigger("scroll");
});
</script>
</body>
</html>