Browser: Observe events when an element is visible in the screen

observe.js

var observer = new IntersectionObserver(function (entries) {
    // isIntersecting is true when element and viewport are overlapping
    // isIntersecting is false when element and viewport don't overlap
    if (entries[0].isIntersecting === true)
        console.log(entries[0].target.id);
}, { threshold: [0] });

// Observe all H2 headings and get their id printed into the console whenever they are in focus
document.querySelectorAll("h2").forEach(function (item) {
    observer.observe(document.querySelector("#" + item.id));
    console.log("Added observer for: #" + item.id);
})