CodePen Embed - 20180827

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>

<header id="header">
ここにヘッダーが入ります。
</header>

<div>
上部ダミーのヘッダーの分だけ、下の要素が下がります。<br>
スクロールで確認できます。
</div>

</body>

*{
	margin:0;
	padding:0;	
}
#header{
	position:fixed;
	top:0;
	margin:0;
	padding:4px;
	width:100%;
	background-color:#ccc;
	z-index:9999;
	height:50px;
}
div{
	height:1000px; /* スクロールで挙動を確認するため高さを指定しています。 */	
}

//ヘッダーの高さ分だけコンテンツを下げる
$(function() {
	var height=$("#header").height();
	$("body").css("margin-top", height + 10);//10pxだけ余裕をもたせる
});

This Pen is owned by RunLand_blog on CodePen.

See more by @RunLand_blog on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.