Sticky header basic

by Roberto Apasajja

HTML

<div id="header">My stick header</div>

<div id="main">
yay<br>yay<br>yay<br>yay<br>yay<br>yay<br>yay<br>yay<br>yay<br>yay<br>yay<br>yay<br>yay<br>yay<br>yay<br>yay<br>yay<br>yay<br>yay<br>yay<br>yay<br>yay<br>yay<br>yay<br>yay<br>yay<br>yay<br>yay<br>yay<br>yay<br>yay<br>yay<br>yay
</div>

CSS

body{margin:0}

#header{
    width: 100%;
    padding:30px;
    color:white;
    position:fixed;
    background:rgba(0, 0, 0, 0.3);
    font-size:20px;
}

#main{
  padding-top:84px;
  background:skyblue
}