Check wanneer een gebruiker voorbij een element is gescrolled
Momenteel heb ik dit:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
$(window).on('load', function() {
let elembestellen = document.querySelector('#bestellen');
var bestellen = elembestellen.getBoundingClientRect().top;
let eleminformatie = document.querySelector('#informatie');
var informatie = eleminformatie.getBoundingClientRect().top;
let eleminspiratie = document.querySelector('#inspiratie');
var inspiratie = eleminspiratie.getBoundingClientRect().top;
let elemreviews = document.querySelector('#reviews');
var reviews = elemreviews.getBoundingClientRect().top;
$(window).scroll(function(){
w = Math.floor( $(window).scrollTop());
if(window.outerWidth > 767) {
// console.log(bestellen);
if( (w > parseInt(bestellen)) && (w < parseInt(informatie)) ){
console.log('#bestellen reached');
}
if( (w > parseInt(bestellen)) && (w > parseInt(informatie)) && (w < parseInt(inspiratie)) ){
console.log('#informatie reached');
}
// if( (w > parseInt(bestellen)) && (w > parseInt(informatie)) && (w > parseInt(inspiratie)) && (w < parseInt(reviews)) ){
// console.log('inspiratie');
// }
// if(w > parseInt(informatie)){
// console.log('informatie');
// }
}
});
});
let elembestellen = document.querySelector('#bestellen');
var bestellen = elembestellen.getBoundingClientRect().top;
let eleminformatie = document.querySelector('#informatie');
var informatie = eleminformatie.getBoundingClientRect().top;
let eleminspiratie = document.querySelector('#inspiratie');
var inspiratie = eleminspiratie.getBoundingClientRect().top;
let elemreviews = document.querySelector('#reviews');
var reviews = elemreviews.getBoundingClientRect().top;
$(window).scroll(function(){
w = Math.floor( $(window).scrollTop());
if(window.outerWidth > 767) {
// console.log(bestellen);
if( (w > parseInt(bestellen)) && (w < parseInt(informatie)) ){
console.log('#bestellen reached');
}
if( (w > parseInt(bestellen)) && (w > parseInt(informatie)) && (w < parseInt(inspiratie)) ){
console.log('#informatie reached');
}
// if( (w > parseInt(bestellen)) && (w > parseInt(informatie)) && (w > parseInt(inspiratie)) && (w < parseInt(reviews)) ){
// console.log('inspiratie');
// }
// if(w > parseInt(informatie)){
// console.log('informatie');
// }
}
});
});
Het probleem is dat '#bestellen reached' goed wordt gelogged wanneer ik de pagina laad als ik helemaal naar boven ben gescrolled. Maar als ik een beetje naar beneden scroll en de pagina ververs dan wordt '#bestellen reached' niet meer goed getoond, de log wordt al veel te vroeg zichtbaar ver voordat ik bij het element ben aangekomen.
Hoe komt dat? Hoe kan ik ervoor zorgen dat de if statements true worden wanneer voorbij de bovenkant van het element is gescrolled, hoe de pagina ook geladen is (geladen met scrollbar tegen de bovenkant, of geladen halverwege de page etc).
Sowieso is dit soort "onscroll" spul tegenwoordig niet meer nodig (Google heeft er ook een hekel aan, omdat je constant code zit te vuren). We hebben nu de Intersection Observer (eenmalig aangeven wanneer je een seintje wilt ontvangen - via callback, en dan gewoon afwachten)!
Gewijzigd op 07/10/2021 17:40:13 door Rob Doemaarwat