Cacher is the code snippet organizer for pro developers

<style type="text/css">
.wrap {height:3000px;background:red;}
#your_id{
  background:rgba(100,100,100,1);
  top:-300px;
  transition: top 0.5s;
}
#your_id.fixed {
    width:100%;
    position: fixed;
    z-index: 999;
    top: 0;
    background:rgba(100,100,100,0.75);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.34);
}
#your_id.fixed ~ .wrap {
  margin-top:80px;
}

@media (max-width: 730px) {
div#your_id.fixed {display: none !important;}
}
</style>

<script type="text/javascript">
$(function () {
 
    $(window).scroll(function(event) {
        if($(this).scrollTop() > 150) {
        $("#your_id").fadeIn();
        $("#your_id").addClass('fixed')
    }
    else {
        $("#your_id").removeClass('fixed')
    }
    });
 
});
</script>