Fading Navigation Bar

[allifields]

Hi, so I have developed a top fixed navigation bar at the top of a webpage. How do I incorporate a fading navigation bar so that when I scroll down, the fixed bar turns from black to a certain opacity level? Is that something incorporating jquery? And if possible, if I hover over the bar, can it turn back to black?

An example would be like this http://tympanus.net/Tutorials/FixedFadeOutMenu/ but I believe he uses background images? And I am also kind of talking about what the Daniweb's navigation bar is doing, except my navigation is fixed at the top in the beginning.

Here is my code.

HTML

<div class="nav">
 <ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#about">About Me</a></li>
    <li><a href="#work">Work</a></li>
    <li><a href="#courses">Courses</a></li>
 </ul>
</div>

CSS

.nav
{
    background-color: #000000;
    text-align: center;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 10000;
    cursor: default;
    font-family: Helvetica, sans-serif;
}

.nav ul
{
    margin: 0;
}

.nav li
{
    display: inline-block;
    line-height: 1.5px;
    margin: 20px 40px 20px 40px;
}

.nav a
{
    position: relative;
    display: block;
    color: #fff;
    text-decoration: none;
    outline: 0;
    font-size: 18px;
}`

Can anyone help me out here? Thank you in advance!

[Dani]

So you mean like what we do on this page?: http://www.daniweb.com/web-development/web-design-html-and-css/15

You need to use jQuery, yes. Here's our code. You will need to modify it for your own needs:

<script type="text/javascript">
<!--
$(function() {
    var header = $('#static-header');
    var body = $('#body');
    var offset = header.offset().top;
    $(window).scroll(function() {
        var new_position = $(this).scrollTop(); 
        if (new_position > offset) {
            if (!(header.hasClass('fixed'))) { header.addClass('fixed'); }
            body.css('margin-top', header.height() + 'px');
        }
        else if (new_position <= header.height() + 30 && header.hasClass('fixed')) {
            if (header.hasClass('fixed')) { header.removeClass('fixed'); }
            body.css('margin-top', 'auto');
        }
    });
});
//-->
</script>

And then the CSS

div#static-header.fixed
{
    position: fixed;
    top: 0px;
    width: 100%;
    opacity: 0.90;
    ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    filter: alpha(opacity=90);
    z-index: 2;
}

[allifields]

Definitely got the navigation bar going on now! Thank you so much!

[Dani]

You're welcome :)