Als van het element een bepaald aantal pixels in beeld is
Ik zit met een vraagstuk waar ik graag wat hulp bij zou willen hebben.
Met een simpele Javascript code word bepaald of een element zich in de viewport bevind.
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
<script type="text/javascript">
var elem = document.getElementById("result");
var bounding = elem.getBoundingClientRect();
if (bounding.top >= 0 && bounding.left >= 0 && bounding.right <= window.innerWidth && bounding.bottom <= window.innerHeight) {
alert('in viewport');
}
</script>
var elem = document.getElementById("result");
var bounding = elem.getBoundingClientRect();
if (bounding.top >= 0 && bounding.left >= 0 && bounding.right <= window.innerWidth && bounding.bottom <= window.innerHeight) {
alert('in viewport');
}
</script>
Dit stukje code bevind zich in een onscroll event.
Dit werk, maar alleen als een element totaal in beeld is (100% dus). Ik zoek eigenlijk een oplossing die check wanneer er zich ook maar 1 pixel zicht in de viewport bevind en die je dan d.m.v. van een parameter kan instellen. (Check of er 30 pixels zichtbaar zijn of check of er 21 pixels zichtbaar zijn...)
Wie o wie kan mij helpen?
Overigens is er tegenwoordig ook de IntersectionObserver die dit veel "beter" voor je doet (niet zelf rekenen + minder "CPU intensief").