Add a semi-transparent BG to a fixed nav menu

2fish-fixed-menu-dirty.js

#toip

2fish-fixed-menu.css

/* 
Must remove 

#top, #top ul.nav li ul li a:hover {
    background: transparent none repeat scroll 0 0 !important;
}

around line 400
*/

#top {
    background-color: rgba(255, 255, 255, 0);
    transition: all 150ms ease 0s;
    z-index: 50000;
}

#top-has-scrolled {
	background-color: rgba(255, 255, 255, 0.9);
	}

2fish-fixed-menu.js

(function($) {

	if(typeof BESSETTE === 'undefined') {
		BESSETTE = {};
	}

	BESSETTE.debounce = function(func, wait, immediate) {
		var timeout;
		return function() {
			var context = this, args = arguments;
			var later = function() {
				timeout = null;
				if (!immediate) func.apply(context, args);
			};
			var callNow = immediate && !timeout;
			clearTimeout(timeout);
			timeout = setTimeout(later, wait);
			if (callNow) func.apply(context, args);
		};
	};

	BESSETTE.topMenu = {
		init: function($menu, minScreenWidth) {
			var _this = BESSETTE.topMenu;

			if(typeof $menu !== 'undefined' && $($menu).length > 0) {
				_this.$topMenu = $menu;
			} else {
				_this.$topMenu = $('#top');
			}

			if(typeof minScreenWidth !== 'undefined' && minScreenWidth > 0) {
				_this.minScreenWidth = minScreenWidth;
			} else {
				_this.minScreenWidth = 0;
			}

			if(_this.$topMenu.length > 0) {
				_this.bindEvents();
			}
		},
		bindEvents: function() {
			var _this = BESSETTE.topMenu;

			// We'll be debouncing the scroll and resize events to not go crazy
			// More info on debouncing: http://davidwalsh.name/javascript-debounce-function
			var debouncedMenuAdjust = BESSETTE.debounce(function() {
				_this.toggleMenuClass();
			}, 100);

			window.addEventListener('resize', debouncedMenuAdjust);
			window.addEventListener('scroll', debouncedMenuAdjust);

		},
		toggleMenuClass : function() {
			var _this = BESSETTE.topMenu,
				iScrollTop = $(window).scrollTop(),
				currScreenWidth = $(window).width();


			if(iScrollTop > 0 && currScreenWidth >= _this.minScreenWidth ) {
				// Applying style
				_this.$topMenu.addClass('has-scrolled');


			} else {
				// Removing style
				_this.$topMenu.removeClass('has-scrolled');
			}
		}
	};


	$(document).ready(function() {


		// Pick one of these by uncommenting it and commenting the others

		// Vanilla version, based on test.bessette.com
		//BESSETTE.topMenu.init();

		// If you change selectors
		//BESSETTE.topMenu.init($('#top'));

		// If you want to make sure it only happens at window widths > X
		BESSETTE.topMenu.init($('#top'), 640);

	});

})(jQuery);