How can I add sticky navigation bar to my webpage - css

Question

I'm working on my first web page and ran into an issue with finding the right code for my sticky nav bar. The nav bar already has a jQuery code attached to it so I'm wondering if that may affect the code, or if I'm not using the right one.Here's the HTML for the nav bar...
<div id="tab_container">
<nav id="tabs">
<ul id="nav">
<li class="active">About</li>
<li class="inactive">Services</li>
<li class="inactive">Our Staff</li>
<li class="inactive">book</li>
<li class="inactive">Gift Cards</li>
<li class="inactive">Reviews</li>
</ul>
</nav>
</div>
Heres my css for it...
#tab_container
{
background-color: #1E1E1E;
display: -webkit-box;
-webkit-box-flex: 1;
display: block;
position: relative;
max-width: 970px;
width: 100%;
text-align: center;
}
#tabs
{
float: left;
margin-top: 0px;
width: 100%;
max-width: 970px;
background-color: #1E1E1E;
padding-top: 20px;
text-align: center;
}
#nav
{
width: 100%;
max-width: 970px;
text-align: center;
background-color: #1E1E1E;
}
ul
{
float: left;
max-width: 970px;
display: -webkit-box;
-webkit-box-flex: 1;
width: 100%;
padding-left: 0px;
margin-bottom: 0px;
margin-top: 0px;
margin-right: 0px;
text-align: center;
background-color: #1E1E1E;
}
ul li
{
display: inline-block;
text-align: center;
width: 158px;
height: 70px;
background-color: #1a1a1a;
font-size: 18px;
text-transform: uppercase;
text-align: center;
margin:0 auto;
padding: 0;
}
ul li a
{
color: #54544b;
display: block;
height: 100%;
width: 100%;
text-decoration: none;
text-align: center;
margin: 0px auto;
line-height: 70px;
}
a:hover
{
color: #CF7BA1;
}
.active a
{
text-decoration: underline;
color: #CF7BA1;
background-color: #222;
}
And for the jQuery I've already included....
$(document).ready(function(){
$('ul#nav li').click(function(){
var number = $(this).index();
$('.sec').hide().eq(number).show();
$(this).toggleClass('active inactive');
$('ul#nav li').not(this).removeClass('active').addClass('inactive');
});
$('.sec').not(':first').hide();
});

Answer 1

To make it sticky you would use position: fixed in the css. That makes it stay in the same position relative to the browser window. You don't have to use any jQuery for this part.

Answer 2

Try position:fixed;
#tab_container
{
background-color: #1E1E1E;
display: -webkit-box;
-webkit-box-flex: 1;
display: block;
position: fixed; //change this to fixed....to stick to top
max-width: 970px;
width: 100%;
text-align: center;
}
You have to compensate for the height of the header though, in your container div, so notice in my demo I have padding of 200px added to "bodydiv" to compensate
DEMO HERE

Answer 3

It is possible to have a nav bar that is sticky even without using javascript, jquery or any other scripting languages. You only need to add another attribute to your CSS code.
Everything that does the magic is the position: fixed attribute. The position attribute denotes the type of the position of a particular division in HTML. It is followed by the attribute(s) that mention the pixel position. They are top, bottom, right, and left.
Here is the code:
#tab_container
{
background-color: #1E1E1E;
display: -webkit-box;
-webkit-box-flex: 1;
display: block;
position: relative;
max-width: 970px;
width: 100%;
text-align: center;
position: fixed;
top: 0px;
}
#tabs
{
float: left;
margin-top: 0px;
width: 100%;
max-width: 970px;
background-color: #1E1E1E;
padding-top: 20px;
text-align: center;
}
#nav
{
width: 100%;
max-width: 970px;
text-align: center;
background-color: #1E1E1E;
}
ul
{
float: left;
max-width: 970px;
display: -webkit-box;
-webkit-box-flex: 1;
width: 100%;
padding-left: 0px;
margin-bottom: 0px;
margin-top: 0px;
margin-right: 0px;
text-align: center;
background-color: #1E1E1E;
}
ul li
{
display: inline-block;
text-align: center;
width: 158px;
height: 70px;
background-color: #1a1a1a;
font-size: 18px;
text-transform: uppercase;
text-align: center;
margin:0 auto;
padding: 0;
}
ul li a
{
color: #54544b;
display: block;
height: 100%;
width: 100%;
text-decoration: none;
text-align: center;
margin: 0px auto;
line-height: 70px;
}
a:hover
{
color: #CF7BA1;
}
.active a
{
text-decoration: underline;
color: #CF7BA1;
background-color: #222;
}
<div id="tab_container">
<nav id="tabs">
<ul id="nav">
<li class="active">About</li>
<li class="inactive">Services</li>
<li class="inactive">Our Staff</li>
<li class="inactive">book</li>
<li class="inactive">Gift Cards</li>
<li class="inactive">Reviews</li>
</ul>
</nav>
</div>
<p> Some Text <p>
<p> Some Text <p>
<p> Some Text <p>
<p> Some Text <p>
<p> Some Text <p>
<p> Some Text <p>
<p> Some Text <p>
<p> Some Text <p>
<p> Some Text <p>
<p> Some Text <p>
<p> Some Text <p>
<p> Some Text <p>
<p> Some Text <p>
Here we are using position: fixed followed by top: 0px because we want the nav bar to always be fixed at 0 pixels from the top of the screen.
If you are looking for a STICKY one, as the question says, you better opt for position: sticky. Hope it helps.
If You want to know more about the position attribute in CSS, please visit https://www.w3schools.com/css/css_positioning.asp