fade-in / fade-out menü durch scrollen!

[white29]

hallo,

ich bin neu hier und habe grundkennnisse in html und css.

ich möchte folgendes menü erstellen:
das menü steht oben am browserrand und hat die form eines horizontalen balkens.
soweit so gut. dann soll sich dieses menü beim runterscrollen (entlang der seite) ebenfalls wegscrollen ABER beim wieder hochscrollen wieder herausfahren.

das heißt das menü verhält sich zunächst völlig umspektakulär, als ob es nicht fixiert wäre aber schon bei der kleinsten rückwärtsbewegung des scrollbalkens kommt es oben aus dem browserrand heraus (ohne, dass man ganz nach oben scrollen muss).

ich habe bereits wie wild recherchiert um zu verstehen wie das funktionieren könnte. leider bin ich mir nicht sicher, ob ich die richtigen begriffe bei der suche eingegeben habe. möglicherweise gibt es da eine spezielle bezeichnung?

diese seite hat so ein menü wie ich mir das vorstelle.
der einzige unterschied ist, dass die menüpunkte versteckt sind in einem "massive drop down".
mir würde bereits der effekt des "fade-in" bei zurückscrollen der seite reichen.

http://www.teehanlax.com/story/medium/

kann mir da jemand weiterhelfen?

vielen lieben dank,
baba

[T-Rex]

Moins,

das sieht zwar spektakulär aus, aber rein programmiertechnisch ist das nix :D.
Du musst mittels Javascript gucken wie weit runter gescrollt wurde. Wenn ein gewisser Punkt überschritten bzw. unterschritten wurde passiert etwas. Der JS Code sieht ungefähr so aus
window.onscroll = function() {
    if( window.scroll > 100 )
   {
       unsichtbar
   } else {
       sichtbar
   }
};

Bei dem Menü kommt noch hinzu dass eine css Klasse mit Transition aktiviert bzw. deaktiviert wird. Mit Transition bekommt man mittels css eine Bewegung der Objekte hin. Sieht bei Browser die das unterstützen ganz nett aus. Tjo diese Bewegung macht nix weiter als das Menü runter zu fahren. Wahrscheinlich von margin-top -20px zu margin-top: 0px oder so.

Hoffe ich konnte dir helfen

Gruß
Beweglicher
T-Rex

[bianca]

hallo t-rex,

vielen dank für deine antwort!

könntest du den code etwas genauer beschreiben oder wäre das zu aufwendig?
ich frage nur weil ich echt keine ahnung von JS code habe :(

herzliche grüsse
bianca

[T-Rex]

Moin,

So sieht das mit JQuery aus:

$(window).scroll( function (event) {  
	if ($(this).scrollTop() >= 100) {  
		$("#DEIN_MENU").addClass("deine_class");  
	} else {  
		$(selector).removeClass("deine_class");  
	}  
});  

zu beachten wäre, dass du DEIN_MENU und deine_class mit deinen Werten füllst. Auch ist die 100 lediglich ein Beispiel, kann auch angepasst werden.

Gruß
Codelieferant
T-Rex