Lösung
bearbeitet von LinuchsIch muss nach einem Scrollvorgang feststellen, ob h1 am oberen Rand des Fensters klebt. Habe ein knappes dutzend Webseiten mit Geschwurbel und Diskussionen durchgesehen, aber keine Lösung gefunden.
Überlegung:
1. Wenn ich sticky mit top:0 definiere und der Abstand `window.scrollY` genauso groß ist wie `h1.offsetTop` klebt h1 am oberen Rand:
~~~js
var h1 = document.getElementsByTagName( "h1" )[0];
document.addEventListener('scroll', function() {
if ( window.scrollY == h1.offsetTop ) {
h1.classList.add( "pos_markiert" ); // Markierung setzen
} else {
h1.classList.remove( "pos_markiert" ); // Markierung entfernen
}
});
~~~
funktioniert bestens.
Allerdings feuert das scroll-Event mehrmals pro Scrollvorgang, wie könnte ich das noch optimieren?
Linuchs
Lösung
bearbeitet von LinuchsIch muss nach einem Scrollvorgang feststellen, ob h1 am oberen Rand des Fensters klebt. Habe ein knappes dutzend Webseiten mit Geschwurbel und Diskussionen durchgesehen, aber keine Lösung gefunden.
Überlegung:
1. Wenn ich sticky mit top:0 definiere und der Abstand `window.scrollY` genauso groß ist wie `h1.offsetTop` klebt h1 am oberen Rand:
~~~js
var h1 = document.getElementsByTagName( "h1" )[0];
document.addEventListener('scroll', function() {
if ( window.scrollY == h1.offsetTop ) {
h1.classList.add( "pos_markiert" ); // Markierung setzen
} else {
h1.classList.remove( "pos_markiert" ); // Markierung entfernen
}
});
~~~
funktioniert bestens.
Linuchs
Lösung
bearbeitet von LinuchsIch muss nach einem Scrollvorgang feststellen, ob h1 am oberen Rand des Fensters klebt. Habe ein knappes dutzend Webseiten mit Geschwurbel und Diskussionen durchgesehen, aber keine Lösung gefunden.
Überlegung:
1. Wenn ich sticky mit top:0 definiere und der Abstand `window.scrollY` genauso groß ist wie `h1.offsetTop` klebt h1 am oberen Rand:
~~~js
var h1 = document.getElementsByTagName( "h1" )[0];
document.addEventListener('scroll', function() {
if ( window.scrollY == h1_offset_top ) {
h1.classList.add( "pos_markiert" ); // Markierung setzen
} else {
h1.classList.remove( "pos_markiert" ); // Markierung entfernen
}
});
~~~
funktioniert bestens.
Linuchs
Lösung
bearbeitet von LinuchsIch muss nach einem Scrollvorgang feststellen, ob h1 am oberen Rand des Fensters klebt. Habe ein knappes dutzend Webseiten mit Geschwurbel und Diskussionen durchgesehen, aber keine Lösung gefunden.
Überlegung:
1. Wenn ich sticky mit top:0 definiere und der Abstand `window.scrollY` genauso groß ist wie `h1.offsetTop` klebt h1 am oberen Rand:
~~~js
var h1 = document.getElementsByTagName( "h1" )[0];
document.addEventListener('scroll', function() {
if ( window.scrollY == h1_offset_top ) {
h1.classList.add( "pos_markiert" ); // Markierung setzen
} else {
h1.classList.remove( "pos_markiert" ); // Markierung entfernen
}
});
~~~
funktioniert bestens.
Linuchs