logo

Vytvořte sexy perzistentní záhlaví s neprůhledností pomocí MooTools nebo jQuery

V poslední době hodně pracuji s řešením Magento eCommerce a oblíbila jsem si techniku, kterou používají s horní lištou v jejich administrativním ovládacím panelu. Když se uživatel posune pod zadanou prahovou hodnotu, horní lišta se připojí k horní části okna a krytí se nastaví na 50 %. Implementoval jsem tuto techniku ​​do svého současného návrhu a dostal jsem mnoho žádostí o tutoriál, takže...tady to máte!

Zobrazit DemoView jQuery Demo

HTML


	Top of Page
	Bottom of Page

DIV s libovolnými prvky a strukturou, kterou chcete.

CSS

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

Použití position:fixed umožní, aby se lišta v aplikaci Internet Explorer 6 dobře degradovala tím, že lištu jednoduše ponecháte nahoře. Nezapomeňte umístit prvek na 0x0 a nastavit 100% šířku. DIV můžete stylizovat jakkoli chcete, ale já bych doporučoval udržet výšku vašeho prvku na minimu.

JavaScript MooTools

window.addEvent('domready',function() {
	(function() {
		var topbar = $('uberbar').set('tween',{ duration: 200 }), topDistance = 30, fadeTo = 0.5;
		var topbarME = function() { topbar.tween('opacity',1); }, topbarML = function() { topbar.tween('opacity',fadeTo); };
		var events = {
			mouseenter: topbarME,
			mouseleave: topbarML
		};
		var ss = new ScrollSpy({
			min: topDistance,
			max: window.getScrollSize().y + 1000,
			onLeave: function() {
				topbarME();
				topbar.removeEvents(events);
			},
			onEnter: function() {
				topbarML();
				topbar.addEvents(events);
			}
		});
	})();
});

Jakmile jsou všechna naše nastavení na místě, používám svůj plugin ScrollSpy k nastavení minimálních a maximálních (vstup a ukončení) hodnot vertikálního posouvání a podle toho přidávám/odebírám události přejetí myší a zadání myši. Události jsou přidány, aby vrátily pruhu t0 100% neprůhlednost, když uživatel najede myší na pruh. ScrollSpy vám umožňuje soustředit se na funkčnost a nestarat se o sledování polohy posouvání. Všimněte si, že jsem nepočítal s tím, že se pruh v IE6 posouvá pomocí JavaScriptu – pokud chcete, aby tento efekt fungoval v IE6, doporučuji použít metodu ScrollSpy onTick(pos) k umístění pruhu při posouvání.

JavaScript jQuery

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

Výše uvedený kód jQuery dosáhne stejného efektu.

Zobrazit DemoView jQuery Demo

Toto není typ efektu, který byste chtěli použít na většině webů, ale může to být skvělý nástroj pro weby, které musí být vysoce funkční.