Header fixe + ancre de navigation

On ajoute une bordure invisible de la taille de notre header pour éviter que ce dernier passe par dessus le contenu

by oilvier

HTML

<header><a href="#anchor">Ancre</a></header>
<main>
	<section></section>
	<section id="anchor">
		Contenu
	</section>
</main>

SCSS

$header-height:100px;

header {position: fixed; top:0; left:0; right:0; background:beige; height:$header-height;}
section {margin:5px; height:100vh;
	/**
	 * On utilise une ancre pour accéder à ce bloc
	 * Comme le header est fixe, on doit décaler le contenu pour qu'il ne soit pas masqué par ce dernier
	 */  
	&[id] {border-top:$header-height solid transparent; margin-top:-$header-height; background-clip:padding-box;}
}



















* {margin:0; padding:0;}
body {font-family:sans-serif;}
header {display:flex;
	a {margin:auto;}
}
a {color:inherit;}
section[id] {background-color:tomato;}