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
Wenn man ausreichende Vorsichtsmaßnahmen trifft, muss man keine Vorsichtsmaßnahmen mehr treffen.
Toller Dampf voraus von Terry Pratchett