Css Trouble With Pinned Header Div

I have a header div on my page that when the page is scrolled down to the header area, it is pinned at the top (via position:'fixed', and top:0), but the problem is that the conten

Solution 1:

Add height of stickHeader to margin-top of contentDiv, and revert it back to whatever it was before (assuming zero here) on unpin.

if (y >= divTop) {
    stickHeader.addClass('fixed');
    contentDiv.css('margin-top', stickHeader.height())
    pinned = true;

} elseif (pinned) {
    stickHeader.removeClass('fixed');
    contentDiv.css('margin-top', 0)
    pinned = false;

}

Solution 2:

Try using margin-top for the header div... try it..

Solution 3:

Fixing the nav-bar whether to the top or bottom results in layering you otherwise avoid. SO: if you figure out the amount of space the bar takes up, specifically the height.. and the you either add or subtract that difference from the margin-top.

If you want the content not to bump up towards the top the header:

margin-top: -some px;

If you want the content to move down the page:

margin-top: some px;