Last Updated:

Fixed navigation bar in jQuery

On each site, we scroll the page to the bottom, but if we need to go back to the menu, then in any case we need to scroll back to the top. if we want to use navigation or implement another function. A fixed navigation bar is a simple solution that provides the user with constant navigation through the site without having to scroll back through the entire content of the page. When a visitor opens your page, they see the default navigation.

If it decides to scroll down the page, the top navigation bar detaches and follows down. If the user decides to go back to the top, he can use a special button on the panel. Navigation on return takes on a normal look. This technique is not limited to the standard menu that detaches from the page, it can be easily changed to display another menu

 

What is the use of such a panel on the site?It saves time. If someone is reading a large blog post and in the middle of the story decides to move to another section, then using the Rocket Bar will help save the time it takes to scroll up the page to find the relevant link in the menu.

 

The panel is not so complicated, it consists of two main components. The first is the jQuery code, which manages the panel by adding classes and attributes that "detach" the panel as you scroll down the page. The second (which is optional) are the CSS3 buttons that are present on the panel. First, we'll look at the jQuery code, and then we'll talk about CSS3. Now let's start with the HTML markup:

<pre>
<div id="floatingbar">
<ul>
<li><img src="images/rocketbar.png" alt="" border="0" /></li>
<li><a href="../version2/demo_2.html"><button>Demo 2</button></a></li>
<li><a><button>About Us</button></a></li>
<li><a href="#service"><button>Services</button></a></li>
<li><a><button>Prices</button></a></li>
<li><a><button>Blog</button></a></li>
<li><a><button>Contact</button></a></li>
<li><a href="javascript:#"><button id="dirbutton" title="Scroll">
<img src="images/bottomarrow.png" alt="" border="0" />
</button></a></li>
</ul>
</div>
</pre>

When the panel is near the top of the page (for example, when the user returns to the top of the page or scrolls back), the class is deleted and the menu returns to its default state. If the user scrolls below the middle of the page ($mid 1), the down speed button becomes the speed up button and the graphics change.

var $top1= $('#floatingbar').offset().top + 20; //add offset for webkit
var $mid1 = Math.floor($(window).height() / 2);
$(window).scroll(function()
{
if ($(window).scrollTop()>$top1)
{
$('#floatingbar').addClass('floater');
}
else
{
$('#floatingbar').removeClass('floater');
}
if($(window).scrollTop() > $mid1)
{
$('#dirbutton').
find('img').
attr('src','images/toparrow.png');
$('#dirbutton').data('mode','scrolldown');
$('#dirbutton').show();
}else
{
$('#dirbutton').
find('img').
attr('src','images/bottomarrow.png');
$('#dirbutton').data('mode','scrollup');
}
});

Animation scrolling down and up, one of the features of the fixed panel is the presence of a button that allows you to return to the top of the page in one click, regardless of the position on the page. Since it requires an image that changes when scrolling in the middle of the page, let's use jQuery's simple image preload functions:

CSS styles. Buttons use gradients, shadows, rounded corners, and text shadows.

button {
position: relative;
margin: 0 .5em .5em .5em;
padding: 0.5em 1.5em;
font-size: 14px;
font-weight: bold;
font-family:Arial;
color: #4f4f4f;
text-shadow: 0 1px 1px #fff;
background: #ddd;
background: -webkit-gradient(linear, left top, left bottom, from(#ededed), to(#c4c4c4));
background: -moz-linear-gradient(top, #ededed, #c4c4c4);
border: 1px solid #acacac;
border-top-color: #bdbdbd;
letter-spacing:-1px;
border-bottom-color: #949494;
border-radius: .214em;
-webkit-border-radius: .214em;
-moz-border-radius: .214em;
transition: all .2s ease-in-out;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
box-shadow: inset 0 1px 0 #fff;
-webkit-box-shadow: inset 0 1px 0 #fff;
-moz-box-shadow: inset 0 1px 0 #fff;
-o-box-shadow: inset 0 1px 0 #fff;
cursor: pointer;
}
button:hover,
button:focus {
box-shadow: 0 0 7px rgba(0,0,0,0.4), inset 0 1px 0 #fff;
-webkit-box-shadow: 0 0 7px rgba(0,0,0,0.4), inset 0 1px 0 #fff;
-moz-box-shadow: 0 0 7px rgba(0,0,0,0.4), inset 0 1px 0 #fff;
-o-box-shadow: 0 0 7px rgba(0,0,0,0.4), inset 0 1px 0 #fff;
}
button:active {
background: #ccc;
background: -webkit-gradient(linear, left top, left bottom, from(#c3c3c3), to(#ebebeb));
background: -moz-linear-gradient(top, #c3c3c3, #ebebeb);
border-color: #a6a6a6;
border-top-color: #939393;
border-bottom-color: #bcbcbc;
box-shadow: inset 0 -1px 0 #fff;
-webkit-box-shadow: inset 0 -1px 0 #fff;
-moz-box-shadow: inset 0 -1px 0 #fff;
-o-box-shadow: inset 0 -1px 0 #fff;
}

On this navigation is ready, successful experiments.