nicht angemeldet
Auge
Matthias Apsel
JürgenB
Auge
Matthias Apsel
Auge
Auge
Hallo
Der Effekt, z.B. den Header flacher anzuzeigen, wenn man auf einer Seite ein Stück nach unten gescrollt hat, sollte ja bekannt sein. Ich weiß leider nicht, wonach ich suchen soll, um mich darüber zu informieren.
Gibt es dafür einen feststehenden Namen, mit dem ich in einer Suche etwas anfangen kann? Kann ich den Effekt auch mit reinem CSS erzeugen oder brauche ich dazu zwingend JavaScript?
Tschö, Auge
Matthias Apsel
JürgenB
Matthias Apsel
Hallo Auge,
Der Effekt, z.B. den Header flacher anzuzeigen, wenn man auf einer Seite ein Stück nach unten gescrollt hat, sollte ja bekannt sein.
Beim wieder zurückscrollen kann das vor allem am Handy ganz schön nervig sein.
Kann ich den Effekt auch mit reinem CSS erzeugen oder brauche ich dazu zwingend JavaScript?
imho nein, du musst mit JS für ein (übergeordnetes) Element die Klassenzugehörigkeit ändern.
Bis demnächst
Matthias
Hallo Matthias,
Der Effekt, z.B. den Header flacher anzuzeigen, wenn man auf einer Seite ein Stück nach unten gescrollt hat, sollte ja bekannt sein.
Beim wieder zurückscrollen kann das vor allem am Handy ganz schön nervig sein.
man kann aber mit window.matchMedia die Mediaqueries ins JS holen und so den Effekt nur auf großen Bildschirmen laufen lasen.
Kann ich den Effekt auch mit reinem CSS erzeugen oder brauche ich dazu zwingend JavaScript?
imho nein, du musst mit JS für ein (übergeordnetes) Element die Klassenzugehörigkeit ändern.
oder Größe / Position von der Scrollposition anhängen lassen.
if(window.scrollY) pos = window.scrollY;
else if(document.documentElement.scrollTop) pos = document.documentElement.scrollTop;
Gruß
Jürgen
Hallo
Ich habe mir aus den Infos von dir und @JürgenB sowie ein paar Fundstellen in Stackoverflow und Blogeinträgen (Datum >= 2016; natürlich beziehen die sich ausschließlich auf jQuery) einen Prototypen zusammengeschustert.
Der Effekt, z.B. den Header flacher anzuzeigen, wenn man auf einer Seite ein Stück nach unten gescrollt hat, sollte ja bekannt sein.
Beim wieder zurückscrollen kann das vor allem am Handy ganz schön nervig sein.
In dieser Hinsicht habe ich keine Probleme bemerkt. Allerdings verändert sich mit der Verringerung der Höhe des Headers die Höhe der Seite und damit die Scrollposition, was bei unpasssender Scrollposition zum flackern der Seite führt. Das lässt sich zwar mit transition verbergen, sauber ist aber anders. Zudem läuft die Trasition im Firefox auf meinem Samsung Galaxy 2 mit Android 6 alles andere als flüssig ab.
Ich vermute, dass das daran liegt, dass ich die Scrollposition in einer Funktion bei jedem scrollen mit der auch alte Browser berücksichtigenden Methode von JürgenB feststellen lasse.
function shrinkHeader() {
var pageheader = document.getElementById('pageheader');
var scrollPosition = 0;
// ermittle die Scrollposition
if (window.pageYOffset) {
// neue Methode
scrollPosition = window.pageYOffset;
} else {
// alte Methode für IE < 9
scrollPosition = document.body.scrollTop;
}
if (scrollPosition > 70) {
pageheader.classList.add('shrinked');
} else {
pageheader.classList.remove('shrinked');
}
}
function initialiseCode() {
// Versehe <body> mit der Klasse jsOn, um die CSS-Regeln nur dann
// anzuwenden, wenn die Scrollposition auch ermittelt werden kann.
document.body.classList.add('jsOn');
document.addEventListener('scroll', shrinkHeader);
}
document.addEventListener('DOMContentLoaded', initialiseCode);
Wenn ich alte Browser allgemein ausschließen kann (@supports(position:sticky) benutze ich), kann ich mir die Variablendeklaration und -initialisierung für scrollPosition und die Verzweigung (if (window.pageYOffset) …) natürlich klemmen und die Ermittlung der Höhe gleich in if (scrollPosition > 70) verpacken (if (window.pageYOffset > 70)). Probieren möchte ich das heute aber nicht mehr.
Danke für eure Hinweise. Die haben mich erheblich weiter gebracht.
Tschö, Auge
Hallo Auge,
Beim wieder zurückscrollen kann das vor allem am Handy ganz schön nervig sein.
In dieser Hinsicht habe ich keine Probleme bemerkt.
Folgende Situation: Du liest mit deinem Handy einen Artikel, hast den Finger drauf, willst noch mal kurz zurück und schwupp, hast du einen Riesen-header im Bild. Aber das passiert eigentlich nur dann, wenn statt der Scroll-Position die Scroll-Richtung abgefragt wird.
Allerdings verändert sich mit der Verringerung der Höhe des Headers die Höhe der Seite und damit die Scrollposition, was bei unpasssender Scrollposition zum flackern der Seite führt.
Lass ein offset dazwischen. Etwa verkleinern bei 100 vergrößern bei 70.
Das lässt sich zwar mit
transitionverbergen,
Würde ich ohnehin mit reinnehmen. Und ohne js oder auf kleinen Viewports ausschließlich die kleine Variante anbieten.
Bis demnächst
Matthias
Hallo
Allerdings verändert sich mit der Verringerung der Höhe des Headers die Höhe der Seite und damit die Scrollposition, was bei unpasssender Scrollposition zum flackern der Seite führt.
Lass ein offset dazwischen. Etwa verkleinern bei 100 vergrößern bei 70.
Gute Idee.
Das lässt sich zwar mit
transitionverbergen,Würde ich ohnehin mit reinnehmen. Und ohne js oder auf kleinen Viewports ausschließlich die kleine Variante anbieten.
Das sehe ich anders. Wird die Technik nicht unterstützt, wird der Header, der auf einem typischen Smartphone in der Portraitansicht etwa 30% der Höhe einnimmt, einfach weggescrollt. Das reicht mMn zumindest für den Portraitmodus aus.
Tschö, Auge
Der Effekt, z.B. den Header flacher anzuzeigen, wenn man auf einer Seite ein Stück nach unten gescrollt hat, sollte ja bekannt sein. Ich weiß leider nicht, wonach ich suchen soll, um mich darüber zu informieren.
Die Material-Design-Guidelines verlieren da ein paar Worte drüber. In Polymer gibts dafür dann auch schon eine fertige Komponente <app-header>.
Hallo
Der Effekt, z.B. den Header flacher anzuzeigen, wenn man auf einer Seite ein Stück nach unten gescrollt hat, sollte ja bekannt sein. Ich weiß leider nicht, wonach ich suchen soll, um mich darüber zu informieren.
Die Material-Design-Guidelines verlieren da ein paar Worte drüber. In Polymer gibts dafür dann auch schon eine fertige Komponente <app-header>.
Das gilt zwar für Android-Apps und nicht für Webseiten, aber trotzdem danke für die Infos.
Tschö, Auge
Das gilt zwar für Android-Apps und nicht für Webseiten
Das Material-Design richtet sich nicht an eine bestimmte Plattform, sondern an GUI-Designer(innen) im Allgemeinen. Unter Android sind Material-Apps sehr verbreitet, weil Google es in sein SDK integriert hat. Aber ich benutze auch regelmäßig Material-Apps für iOS und fürs Web und habe sogar schon selber welche entwickelt. Um es kurz zu halten, es bleibt jedem selbst überlassen, wieviel er oder sie vom Material-Design wirklich implementieren möchte, aber als Informationsquelle für oder wider bestimmter Design-Patterns habe ich es lieb gewonnen - insbesodere das Kapitel über Animationen empfehle ich gerne weiter, weil die Regeln darin gewissermaßen allgemeingültig sind. Das Kapitel über Scroll-Effekte, das ich dir verlinkt habe, fällt leider recht dünn aus. Die Polymer-Implementierung ist dafür umso ausführlicher kommentiert und leicht nachzuvollziehen - da könntest du auch mal einen Blick reinwerfen, das hilft dir vielleicht bei deiner eigenen Lösung.