Slide in menu

**peter_lang** · 10.08.2016, 08:14

Hallo Gemeinde,

ich würde gerne diesen Menu-Effekt einbauen https://www.tempton.de/de/tempton-fu...en/talentpool/. Beim herunterscrollen erscheint das Menu dann ... gibts dazu ein Modul oder eine Beschreibungsseite? Habe leider nicht viel passendes gefunden

Ist das ein ein normaler Sticky header?

Danke im Voraus

**Gassi** · 10.08.2016, 08:38

Hey,
es gibt hierfür mehrere Wege. Einer z.B.:

ein zweites Menü anlegen das beim runterscrollen eingeblendet wird (und dieses z.B. über jquery oder CSS ausblenden).
Über Jquery abfangen wenn runtergesrollt wird über scrollTop();
ausgeblendetes Menü über Jquery einblenden lassen
genau das selbe andersrum beim erreichen von Scoll Punkt 0

Gruss Gasssi

ps - ein Beispiel:

Code:

$(window).scroll(function() {
    var height = $(window).scrollTop();

    if(height  > some_number) {
        // do something
    }
});

**Mr. Acylase** · 10.08.2016, 11:06

Hi Peter,
ich habe mir hierzu zwei Navigationsmenüs angelegt (ID1: menu und ID2: menu_slide). Per Jquery blende ich dann beim scrollen das eine Menü aus und das andere ein. Anbei noch mein Code Beispiel:

Code:

<script>
$(document).ready(function(){

	// Das Menue wird ausgeblendet
	$("#menu_slide").hide();

	// Funktion für das Scroll-Verhalten
	$(function () {
		$(window).scroll(function () {
			if ($(this).scrollTop() > 70) { // Ausblenden bzw. einblenden wenn 70 Pixel gescrolled wurde
				$('#menu_slide').fadeIn();
				$("#menu").fadeOut();
			} else {
				$('#menu_slide').fadeOut();
				$("#menu").fadeIn();
			}
		});

	});
});
</script>

Sehen kannst Du das Menu unter www.sanitaetshaus-kern.com/startseite.html (Seite befindet sich noch in der Entwicklung)

Grüße
Stefan