This example demonstrates how to slide down a navbar when the user starts to scroll the page.

Scroll down this frame to see the effect!

Scroll to the top to hide the navbar.

<style>
#kv-navbar {
  position: sticky;
  top: 0; /* it does not reposition right away,
             but determines at which point it sticks */
}

#kv-navbar {
  background-color: #000!important;
  width: 100%;
  display: flex;
  transition: top 0.7s;
  z-index:2222;
}

#kv-navbar a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 12px 20px;
  text-decoration: none;
  font-size: 16px;
}

#kv-navbar a:hover {
  background-color: #ddd;
  color: black;
}

</style>
  
<div id="kv-navbar">

    <a href="#home">Home</a>
    <a href="#news">News</a>
    <a href="#contact">Contact</a>

</div>