Prevent content getting covered changing from relative header to fixed header - html

Question

I have a relative positioned header and when the user scrolls down the page, I want to shift to a fixed header. This is working fine except that the header ends up covering the element the user had scrolled to. Is it possible to prevent this so that the gap between the header and the element remains the same for a seamless transition?
$(function() {
var hh = $('header').outerHeight();
$(window).scroll(function() {
var scroll = $(window).scrollTop();
var last = 0;
if (scroll >= hh) {
$('body').addClass('sticky');
} else {
$('body').removeClass('sticky');
}
last = scroll;
});
});
body,html {
margin:0;
}
.site-container {
position:relative;
width:90%;
height:1500px;
margin:0 auto;
background:gray;
}
img {
width:100%;
}
header {
display:flex;
flex-direction:column;
width:100%;
background:white;
}
body.sticky header {
position:fixed;
width:inherit;
}
.top-bar {
background:purple;
color:white;
padding:3px 0;
text-align:right;
}
ul {
margin:0;
padding-left:10px;
list-style-type:none;
}
li {
display:inline-block;
margin-left:10px;
line-height:30px;
}
li:first-child {
margin-left:0;
}
.site-content {
padding:50px 30px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="site-container">
<header>
<div class="top-bar">[phone]</div>
<nav>
<ul>
<li>Home</li>
<li>Lorem</li>
<li>Ipsum</li>
</ul>
</nav>
</header>
<div class="site-content">
<img src="https://via.placeholder.com/800x400/0000FF/808080" />
</div>
</div>

Answer 1

There is a simpler solution using css only, without jQuery needed.
Try css property "position: sticky" - https://developer.mozilla.org/en-US/docs/Web/CSS/position
body,html {
margin:0;
}
.site-container {
position:relative;
width:90%;
height:1500px;
margin:0 auto;
background:gray;
}
img {
width:100%;
}
header {
display:flex;
flex-direction:column;
width:100%;
background:white;
position: sticky;
top: 0;
}
.top-bar {
background:purple;
color:white;
padding:3px 0;
text-align:right;
}
ul {
margin:0;
padding-left:10px;
list-style-type:none;
}
li {
display:inline-block;
margin-left:10px;
line-height:30px;
}
li:first-child {
margin-left:0;
}
.site-content {
padding:50px 30px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="site-container">
<header>
<div class="top-bar">[phone]</div>
<nav>
<ul>
<li>Home</li>
<li>Lorem</li>
<li>Ipsum</li>
</ul>
</nav>
</header>
<div class="site-content">
<img src="https://via.placeholder.com/800x400/0000FF/808080" />
</div>
</div>