Sticky Header soll erkennen, wenn via Mobile zugegriffen wird

**m-werk** · 27.07.2018, 10:24

Hallo, ich hab ein Javascript für mein Menü, welches sich nach einer gewissen scrollhöhe oben am Bildschirm anpasst.

Funktioniert soweit sehr gut.

Jetzt möchte ich aber zusätzlich noch einen weiteren ScrollPunkt (scrollTo) für mobile geräte hinzufügen. Kann mir jemand sagen, wie ich das erstelle?

Es soll erkannt werden wenn ein User via Mobile auf die HP zugreift. Hier sollte dann scrollTo bei 420 sein. Über den PC ist der scrollTo bei 470 (Siehe Code).

Code:

<script>
$(window).scroll(function(){
    if ($(window).scrollTop() >= 270) {
       $('.custom').addClass('fixed-header');
       $('.custom .logo_menu').fadeIn(800);
       $('.custom .logo_menu').css('display', 'block');
       $('.custom').css('background-color', '#f9f9f9');
    }
    else {
       $('.custom').removeClass('fixed-header');
       $('.custom .logo_menu').css('display', 'none');
       $('.custom').css('background-color', '#ffffff');
    }
});
</script>

**NetMediaWork** · 27.07.2018, 10:38

Hallo,

schau dir mal bugbuster/contao-mobiledetection-bundle an, dann kannst du zusätzlich die class abfragen mit welchem Gerät zugegriffen wird und das script entsprechend anpassen.

**m-werk** · 27.07.2018, 10:48

Ok, das ist schon mal gut, aber mir geht es um die Zeile

Code:

if ($(window).scrollTop() >= 270)

Hier soll entweder die Zahl 270 oder 240 hinein.

Ich weiß jetzt nicht, wie ich es hier anstelle, dass ich sage:

wenn mobile, dann 240, ansonsten 270.

**mlweb** · 27.07.2018, 12:29

Wenn ich @NetMediaWork richtig verstanden habe, dann setzt die oben genannte Erweiterung eine Klasse bei mobilem Endgerät, die Du in Deinem js verwenden kannst.

**NetMediaWork** · 27.07.2018, 15:35

Zitat von mlweb

Wenn ich @NetMediaWork richtig verstanden habe, dann setzt die oben genannte Erweiterung eine Klasse bei mobilem Endgerät, die Du in Deinem js verwenden kannst.

Richtig z.b.

Code:

<body id="top" class="mac safari webkit sf11 computer" itemscope itemtype="http://schema.org/WebPage">

**m-werk** · 30.07.2018, 07:42

Hab nun etwas herumprobiert, aber ich komm auf keinen grünen Zweig:

Code:

<script>
$(window).scroll(function(){
	if ($(.mobile)) {
		wert = 211;
	} else {
		wert = 270;
	}
	if ($(window).scrollTop() >= wert) {
	   $('.custom').addClass('fixed-header');
	   $('.custom .logo_menu').fadeIn(800);
	   $('.custom .logo_menu').css('display', 'block');
	   $('.custom').css('background-color', '#f9f9f9');
	}
	else {
	   $('.custom').removeClass('fixed-header');
	   $('.custom .logo_menu').css('display', 'none');
	   $('.custom').css('background-color', '#ffffff');
	}
});
</script>

Das funktioniert mal nicht

**m-werk** · 30.07.2018, 07:54

Ich hab's gelöst.

So fuktioniert es jetzt:

Code:

<script>
$(window).scroll(function(){
	if ($('.mobile').length > 0) {
		wert = 200;
	} else {
		wert = 270;
	}
	    if ($(window).scrollTop() >= wert) {
	       $('.custom').addClass('fixed-header');
	       $('.custom .logo_menu').fadeIn(800);
	       $('.custom .logo_menu').css('display', 'block');
	       $('.custom').css('background-color', '#f9f9f9');
	    }
	    else {
	       $('.custom').removeClass('fixed-header');
	       $('.custom .logo_menu').css('display', 'none');
	       $('.custom').css('background-color', '#ffffff');
	    }
});
</script>

**wanst** · 30.07.2018, 10:30

Zitat von m-werk

...

Code:

//...
	       $('.custom').addClass('fixed-header');
	       $('.custom .logo_menu').fadeIn(800);
	       $('.custom .logo_menu').css('display', 'block');
	       $('.custom').css('background-color', '#f9f9f9');

Warum machst du die CSS-Sachen nicht im CSS selbst, wenn du eh schon eine eigene Klasse hinzufügst (.custom.fixed-header)?

Übergänge (fadeIn) kannst du auch mit CSS-Transitions erstellen.

**m-werk** · 30.07.2018, 10:47

Weil wie ich mich nach Sticky Header umgesehen habe, mir nur Javascripts vorgeschlagen wurden und ich dies dann so nachgebaut habe.

Das heißt, ich müsste noch die .logo_menu und .custom als css anlegen, und dann auch so einbinden?:

Code:

 $('.custom').addClass('logo_menu');
 $('.custom').addClass('custom');

NACHTRAG:
Außerdem hab ich ja .logo-menu auch schon definiert:

Code:

.logo_menu {
    width:60px;
    position:absolute;
    float:left;
    display:none;
    margin-top:5px;
    margin-left:20px;
}

Ich ändere ja nur im JS display auf block und lass es langsam einblenden.

Ich hab nun auch ein CSS gebaut, aber die transition funktioniert hier nicht. Das display greift, aber das logo wird nicht langsam eingeblendet. (Den CSS-Teil im JS hab ich natürlich dementsprechend ausgeblendet)

Code:

.fixed-header .logo_menu {
    display:block;
    -webkit-transition: all 2s ease-in;
    -moz-transition: all 2s ease-in;
    -o-transition: all 2s ease-in;
    transition: all 2s ease-in;
}

**wanst** · 30.07.2018, 11:32

Naja, eher so:

CSS:

Code:

/* so soll es am Anfang aussehen: */
.custom {
	background-color:#fff;
}
.custom .logo_menu {
	display:none;
}
/* und so, wenn die Seite gescrollt wurde: */
.custom.fixed-header {
	background-color:#f9f9f9;
}
.custom.fixed-header .logo_menu {
	display:block;
}

und

JS:

Code:

$(window).scroll(function(){
	if ($('.mobile').length > 0) {
		wert = 200;
	} else {
		wert = 270;
	}
	    if ($(window).scrollTop() >= wert) {
	       $('.custom').addClass('fixed-header');
	    }
	    else {
	       $('.custom').removeClass('fixed-header');
	    }
});

Wenn es dann noch faden soll, bspw. sowas:

CSS:

Code:

.custom {
	background-color:#fff;
	-webkit-transition: background-color 800ms ease-out;
	-moz-transition: background-color 800ms ease-out;
	-o-transition: background-color 800ms ease-out;
	transition: background-color 800ms ease-out;
}

Und wenn du statt nur CSS auch noch LESS verwendest (was einem Contao wirklich leicht macht, weil du die Kompilierung nicht selbst machen musst), musst du auch nicht jedesmal die browserspezifischen Anweisungen einzeln hinschreiben, sondern kannst das als Funktion schreiben:

LESS:

Code:

/* --- einmal die LESS-Funktion definieren: --- */
.fade(...) {
	-webkit-transition: @arguments;
	-moz-transition: @arguments;
	-o-transition: @arguments;
	-ms-transition: @arguments;
	transition: @arguments;
}
/* --- und dann immer wieder verwenden: --- */
.custom {
	background-color:#fff;
	.fade(background-color 800ms ease-out);
}
.custom.fixed-header {
	.fade(background-color 2s ease-out);
}

Wie du die Funktion nennst und welche Werte du veränderst, ist natürlich dein Ding – sind nur Beispiele von mir.

**wanst** · 30.07.2018, 11:36

... dein Nachtrag kam jetzt in mein Geschreibsel rein.

Ja, eben – den hast du schon definiert, jetzt musst du nur noch sagen, was passieren soll, wenn .custom die .fixed-header dazubekommt. (s.o.)

**m-werk** · 30.07.2018, 11:37

CSS:

Code:

.custom {
	background-color:#fff;
	-webkit-transition: background-color 800ms ease-out;
	-moz-transition: background-color 800ms ease-out;
	-o-transition: background-color 800ms ease-out;
	transition: background-color 800ms ease-out;
}

Ich möchte ja eigentlich nur, dass das Header-Logo hier langsam eingeblendet wird, nicht die Farbe. (Siehe meinen letzten Code, wo ich display auf block setze)

**m-werk** · 30.07.2018, 11:38

Zitat von wanst

... dein Nachtrag kam jetzt in mein Geschreibsel rein.

Ja, eben – den hast du schon definiert, jetzt musst du nur noch sagen, was passieren soll, wenn .custom die .fixed-header dazubekommt. (s.o.)

Das passiert eh. Nur nicht langsam. Das transition greft nicht.

NACHTRAG:
Jetzt hab ich mal deinen Vorschlag bei mir eingebunden und angepasst.
Bis auf das, dass das Logo nicht langsam eingeblendet wird, funktioniert es. Hat bei mir vorher auch funktioniert.

Ich möchte aber, dass das Logo auch langsam eingeblendet wird.

**wanst** · 30.07.2018, 11:53

Zitat von m-werk

Das passiert eh. Nur nicht langsam. Das transition greift nicht

Ja, display lässt sich nicht über transition beeinflussen, weil sich das Element dann grundlegend anders verhält – in deinem Fall wird es im DOM am Anfang gar nicht angezeigt. Transitions greifen nur bei Eigenschaften wie Farben, Größen, margin, padding etc., wo es Zwischenwerte gibt. Bei display gibt es nur 0 und 1. Das ließe sich zwar tricksen, indem du statt display bspw. opacity zum Ausblenden hernimmst, aber das ist schlechter Stil, u.a. weil das Element dann in Screenreadern trotzdem vorgelesen wird.

Du kannst dich ja mal durchwühlen, was Google zu 'css-transition display' hergibt oder das tatsächlich per JS machen.

**m-werk** · 30.07.2018, 12:00

Hm, also, wenn ich das Logo langsam eingeblendet haben möchte, muss ich im JS also diesen bereich doch stehen lassen:

$('.custom .logo_menu').fadeIn(800);

**wanst** · 17.10.2018, 14:49

Hi back

Sorry, hatte viel zu tun – bist du inzwischen selbst weiter gekommen? Hast du schon mal bei CSS-Tricks gesucht? Da gibt's coole Ansätze für Probleme, von denen du nie geahnt hättest, dass sie sich mit 'CSS only' lösen lassen.