Navigation Bar Height and Functionality - css

Question

So I'm looking at creating a navigation bar that'll sit at the top of my webpage and stick to it no matter where I scroll, but it always gets caught and disappears as I scroll away?
Not only that, but this is what happens when I hover over it:
Is it possible to also only have the darker background fill the actual black bar it sits inside?
This is the snippet from my style sheet as well:
body {
background-color: #ecf0f1;
margin: 0;
font-family: Arial;
}
header {
background-color: #333;
}
.navbar {
height: 5%;
overflow: auto;
margin: auto;
width: auto;
min-height: 60px;
top: 0;
text-align: center;
}
.title {
display: block;
}
.navbar ul {
list-style-type: none;
position: fixed;
top: 0;
padding: 0;
overflow: hidden;
}
.navbar li {
display: inline-block;
}
.navbar li a {
padding: 25px;
display: block;
height: 100%;
color: white;
text-decoration: none;
}
/* Change the link color to #111 (black) on hover */
.navbar li a:hover {
background-color: #111;
}
All help is greatly appreciated! First time playing around with CSS!
EDIT:
Here is the snippet of HTML that creates this header
<link rel="stylesheet" type="text/css" href="style/style.css">
<header>
<div class="navbar">
<ul>
<li>Home</li>
<li>About Us</li>
<li>Contracts</li>
<li>Other</li>
</ul>
</div>
</header>

Answer 1

Fix the header...not the navbar or the menu.
body {
background-color: #ecf0f1;
margin: 0;
font-family: Arial;
}
header {
background-color: #333;
position: fixed;
top: 0;
width: 100%;
}
.navbar {} .title {
display: block;
}
.navbar ul {
list-style-type: none;
padding: 0;
margin: 0;
overflow: hidden;
}
.navbar li {
display: inline-block;
}
.navbar li a {
padding: 25px;
display: block;
height: 100%;
color: white;
text-decoration: none;
}
/* Change the link color to #111 (black) on hover */
.navbar li a:hover {
background-color: #111;
}
body {
height: 2000px; /* so you can see the header NOT moving */
}
<header>
<div class="navbar">
<ul>
<li class="hvr-underline">Home
</li>
<li>About Us
</li>
<li>Contracts
</li>
<li>Other
</li>
</ul>
</div>
</header>