Wie macht man das?! Switchende Navi

[bobomampf]

Hey Forum,
kurze Frage. Wie macht man sowas? http://smartgc.com.ar/english.php

Erst eine normale Navi und beim runter scrollen fährt sie von oben ganz klein rein.

Ich habe keinen Namen dazu und weiss nicht wo ich sowas suchen muss. Javascript wäre sicher ne Lösung. CSS3 natürlich der Wahnsinn..


Könnt ihr mir da weiterhelfen?

 

[user_1234]

Hallo bobomapf,

ich würde es mit <span>s machen und via CSS das Background-Image beim Hover-Zustand austauschen.
Beim draufklicken das farbige Bild in einer Lightbox öffnen.

Viele Grüße,
Joshua

 

[threadi]

Laut Quelltext dort läuft das mit der jQuery-Erweiterung "easeOutCubic".

 

[bobomampf]

Mhm.. Das Plugin hab ich mal gegooglet, aber viel finde ich dazu nicht. Habt ihr denn einen Name dazu? Sonst gibts doch für alles ein Script oder so.

 

[Tar]

//-------------------------------------------------------
//
//				SCROLL
//
//-------------------------------------------------------


	var menuFijo=false;	
	function fijarMenu(){
		if(!menuFijo){
			menuFijo=true;
			$fakeNav.fadeOut('fast', function(){$nav.animate({top:0},'slow');});
		}
	}
	function soltarMenu(){
		if(menuFijo){
			menuFijo=false;
			$('.menu .botones-del-menu a').removeClass('selected');
			$('#resalta').fadeOut(500);		
			$nav.animate({top:-38},'100','easeOutQuad', function(){$fakeNav.fadeIn('slow');});
		}
	}
	if(!iOS){
		$window.scroll(function(){
			var pos = $window.scrollTop();
			if(!menuFijo & pos>38){fijarMenu();}
			if(menuFijo & pos<=38){soltarMenu();}
		});
	}

Das sollte der verantwortliche Code sein. Kurz gesagt, ans Scrollen wird eine Funktion gehängt, und wenn man über "38" (Pixel?) vom oberen Seitenrand gescrollt hat wird das eine Menü ausgeblendet und das zweite eingeblendet. Scrollt man wieder unter diese Schranke geschieht das ganze anders herum.

Das einzige, dass her nicht pures JQuery ist scheint das von threadi angesprochene easing zu sein.

 

[bobomampf]

Ok. Muss ich mal gucken, ob ich das versteh..