Make div sticky on scroll

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> <a href="http://myweb.com" style="color:#ffffff; text-decoration:none; position:absoulute; display:block; margin-top:-33px; margin-left:38px; z-index:5; width:250px; font-weight:bold;">MY WEB</a></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> <a href="http://myweb.com" style="color:#ffffff; text-decoration:none; position:absoulute; display:block; margin-top:-33px; margin-left:38px; z-index:5; width:250px; font-weight:bold;">MY WEB</a></h2>
    </div>
    </div>
    <div class="content">
    <img src="https://material.angular.io/assets/img/examples/shiba1.jpg"/>
    </div>