[CSS][jQuery] Przezroczysty pasek nawigacyjny będący zawsze u góry okna przeglądarki

Dzisiejszy artykuł będzie dotyczył możliwości uzyskania efektu przeźroczystego paska nawigacyjnego znajdującego się zawsze w górnej części okna przeglądanej strony. Dzięki temu, mozemy zapewnić nieustanny dostęp do menu, a jednocześnie pozwalając czytać informacje ukryte pod paskiem nawigacyjnym.
W tym przykładzie na pasku nawigacyjnym znajduje się lista rozwijana i przyciski do przewijania strony

Zaczniemy od kodu HTML:

<div id="nawigacja">
	<a href="#top">Początek strony</a>
	<a href="#bottom">Koniec strony</a>
	<ul id="lista">
    	<li>Jeden</li>
        <li>Dwa
        	<ul>
            	<li>Jeden</li>
                <li>Dwa</li>
                <li>Trzy</li>
            </ul>
        </li>
        <li>Trzy</li>
    </ul>
</div>

Teraz pora na trochę kodu CSS:

#nawigacja { 
	border-bottom: 1px solid #eb7429; 
	background: #b30000; 
	padding: 10px 20px; 
	position: fixed; 
	top: 0; 
	left: 0; 
	z-index: 10; 
	width: 100%;
}

Zastosowanie position: fixed pozwala na poprawne zachowanie w IE6, czyli pozostawienie paska nawigacyjnego na górze okna przeglądarki.
Następnym punktem programu jest kod JavaScript oparty na bibliotece jQuery, który wygląda następująco:

$(document).ready(function() {
	(function() {
		var fadeSpeed = 200, fadeTo = 0.5, topDistance = 30;
		var topbarME = function() { $('#nawigacja').fadeTo(fadeSpeed,1); }, topbarML = function() { $('#nawigacja').fadeTo(fadeSpeed,fadeTo); };
		var inside = false;
 
		$(window).scroll(function() {
			position = $(window).scrollTop();
			if(position > topDistance && !inside) {
 
				topbarML();
				$('#nawigacja').bind('mouseenter',topbarME);
				$('#nawigacja').bind('mouseleave',topbarML);
				inside = true;
			}
			else if (position < topDistance){
				topbarME();
				$('#nawigacja').unbind('mouseenter',topbarME);
				$('#nawigacja').unbind('mouseleave',topbarML);
				inside = false;
			}
		});
	})();
});

Skrypt zostanie wykonany po całkowitym załadowaniu się strony.
To byłoby na tyle, jeśli chodzi o sposób uzyskania tego efektu. Od siebie mogę dodać, że efekt ten najprawdopodobniej znajdzie swoje zastosowanie w nowej wersji szablonu dla mojego bloga, który ulegnie gruntownej modernizacji. Lecz to dopiero po nowym roku.
Demo z tego artykułu można zobaczyć tutaj: przeźroczysty pasek nawigacyjny z wykorzystanie jQuery.