Make div sticky on scroll - html

Question

how to sticky div on scroll
see my screenshoot :
this screenshoot if sticky on top :
and this screenshoot sticky on scroll :
i mean like this, if sticky go to top the div back to normal (i mean without css sticky)
see this screenshoot, i want like this, if div stick go to the top back to normal (without css sticky) :
this my sticky :
#media screen and (min-width: 768px) {
.sticky {
position: fixed;
z-index: 9999;
display: block;
background-color: #2069e8;
width: 100%;
padding: 10px;
margin-top: -10px;
padding-top:10px
}
}
<div class="sticky">
<div class="col-sm-2">
<h2 style="margin:0px; width:250px;"><span class="smallnav menustater" onclick="openNav()"><i class="fa fa-th-list"></i></span> MY WEB</h2>
</div>
</div>
Please Help
Thanks before

Answer 1

The easiest solution is to keep your div always sticky but increase the padding-top of the div that is below it to make sure that the content can't go under the sticky div.
This will avoid this:
By moving the page content to the bottom.
Demo: https://jsfiddle.net/g9nhq3up/

Answer 2

You have to set padding-top: to the content (not to the nav)
See code:(JSFiddle:https://jsfiddle.net/0fp1qsw3/)
.sticky {
position: fixed;
z-index: 9999;
display: block;
background-color: #2069e8;
width: 100%;
padding: 10px;
margin-top: 15px;
padding-top:10px
}
.content{
padding-top: 50px;
}
<div class="sticky">
<div class="col-sm-2">
<h2 style="margin:0px; width:250px;"><span class="smallnav menustater" onclick="openNav()"><i class="fa fa-th-list"></i></span> MY WEB</h2>
</div>
</div>
<div class="content">
<img src="https://material.angular.io/assets/img/examples/shiba1.jpg"/>
</div>