Fade in Menu Background on Scroll

This is a nice jQuery fade in menu I have used on a few sites recently. As you scroll down the page, a block of colour fades in behind the navigation. This works well when you have a banner image at the top of the page acting as the navigation background.

Here is the script to go in your footer:

<script>
jQuery(window).scroll(function() {
var scroll = jQuery(window).scrollTop();
if (scroll >= 200) {
jQuery(“#main-menu”).addClass(“expand”);
};
if (scroll <= 199) {
jQuery(“#main-menu”).removeClass(“expand”);
}
});
</script>

And here is the CSS:

/* === Menu Fade in when scroll down ==== */
#main-menu{
top:0;
position:fixed;
height:72px;
z-index: 9998;
transition: all .7s ease-in-out;
-webkit-transition: all .7s ease-in-out;
-moz-transition: all .7s ease-in-out;
-ms-transition: all .7s ease-in-out;
-o-transition: all .7s ease-in-out;
width: 100%;
background: #000;
-ms-filter:”progid:DXImageTransform.Microsoft.Alpha(Opacity=20)”;
filter: alpha(opacity=20);
-moz-opacity:0.2;
-khtml-opacity: 0.2;
opacity: 0.2;
}
#main-menu.expand {
width: 100%;
-ms-filter:”progid:DXImageTransform.Microsoft.Alpha(Opacity=100)”;
filter: alpha(opacity=100);
-moz-opacity:1.0;
-khtml-opacity: 1.0;
opacity: 1.0;
}

You can of course change the CSS to whatever fade in technique you like, such as a wipe effect from left to right etc.