[CSS][jQuery] Przezroczysty pasek nawigacyjny będący zawsze u góry okna przeglądarki
Ten wpis ma 16 lat. Od tego czasu przeglądarki i narzędzia mogły się zmienić, więc zanim użyjesz kodu, sprawdź go z aktualną dokumentacją.
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.
O autorze
