Auto-Hiding Navbar with Javascript

Intoduction :- 
Hii Friends...
today i explain how to hide a navbar when scroll the page. Fixed headers are fairly common nowadays with big name brands like Facebook, Twitter, Google, LinkedIn, and others using this pattern. Other apps and websites are already doing this, and it’s pretty sweet. Here’s how you do it.

DEMO:- 

• Go quickly to ->
• Mobiles
• AC
• Refrigerators
• Cameras
• Sports

Example :-

<style type="text/css">

 .topper-link
{
list-style:none;
background:#fff;
width:100%;
text-align:center;
box-shadow: 2px 2px 3px #000;
height:35px;
}
.topper-link li
{
display:inline-block;
color:#333;
}
.tp1
{

}
.topper-link li a
{
border-right: 1px solid #333;
color: #333;
display: block;
padding: 5px 10px;
text-decoration: none;
}
    </style>

<div id="scid" class="row">
    <div class="container">
        <div class="top_menu tp1">
            <ul class="topper-link" style="margin-top: 3px; padding-top: 3px;">
                <li>Go quickly to -> </li>
                <li><a href="#">Mobiles</a> </li>
                <li><a href="#">Books</a> </li>
                <li><a href="#">Food</a> </li>
                <li><a href="#">Lighting</a> </li>
            </ul>
        </div>
    </div>
</div>
<script type="text/javascript">
    $(document).scroll(function () {
        if (($(this).scrollTop() / 10) > 10) {
            $('#scid').css('display', 'none');
        }
        else {
            $('#scid').css('display', 'block')

        }
    });
</script>

</div>
</div>

</div>