SOURCE

$(function() {
    (function() {
        const options = {
            // root: document.querySelector('#app'),
            rootMargin: '0px',
            threshold: [0.3, 0.5, 0.8, 1]
        };
        const handler = (entries, observer) => {
            entries.forEach(entry => {
                console.log(entry);
            })
        };
        const observer = new IntersectionObserver(handler, options);

        observer.observe(document.querySelector('#id1'));
    })();

    (function() {
        const callback = (mutationsList, observer) => {
            mutationsList.forEach((mutation) => {
                console.log(mutation);
            })
        };
        const observer = new MutationObserver(callback);
        observer.observe(document.querySelector('#id2'), {
            attributes: true
        })
        observer.observe(document.querySelector('#id3'), {
            attributes: true,
            characterData: true,
        })
    })();

    $('#id2').css('background', 'green');
    $('#id3').attr('value', 1233);
})

const boxes = document.querySelectorAll('.box');
let callbackFired = 0;
const myObserver = new ResizeObserver(entries => {
    for (let entry of entries) {
        callbackFired++
        const infoEl = entry.target.querySelector('.info');
        const width = Math.floor(entry.contentRect.width);
        const height = Math.floor(entry.contentRect.height);
        const angle = Math.floor(width / 360 * 100);
        const gradient = `linear-gradient(${ angle }deg, rgba(0,143,104,1) 50%, rgba(250,224,66,1) 50%)`;
        entry.target.style.background = gradient;
        infoEl.innerText = `
        I'm ${ width }px and ${ height }px tall
        Callback fired: ${callbackFired}
        `;
    }
});
boxes.forEach(box => {
    myObserver.observe(box);
});

<div id="app">
    <div id="id1"></div>
    <div id="id2"></div>
    <input id="id3"/>

    <div class="box">
    <h3 class="info"></h3>
</div>
<div class="box small">
    <h3 class="info"></h3>
</div>
</div>

#app {
    height: 2000px;
}
#id1 {
    height: 100px;
    width: 100px;
    background: red;
}
#id2 {
    height: 100px;
    width: 100px;
    background: blue;
}
body {
    margin: 0;
}



.box {
    text-align: center;
    height: 20vh;
    border-radius: 8px;
    box-shadow: 0 0 4px rgba(0,0,0,.25);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1vw
}
.box h3 {
    color: #fff;
    margin: 0;
    font-size: 5vmin;
    text-shadow: 0 0 10px rgba(0,0,0,0.4);
}
.box.small {
    max-width: 550px;
    margin: 1rem auto;
}