[CSS][jQuery] Przezroczysty pasek nawigacyjny będący zawsze u góry okna przeglądarki
This post is 16 years old. Browsers and tools may have changed since then, so check the code against current documentation before you use it.
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>#nawigacja {
border-bottom: 1px solid #eb7429;
background: #b30000;
padding: 10px 20px;
position: fixed;
top: 0;
left: 0;
z-index: 10;
width: 100%;
}
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;
}
});
})();
});
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.
About the author
