Ah, I understand now. If you want the .sticking to be applied when the header is touching the top (i.e., when its top is at the top of the viewport) and removed otherwise, you can check the getBoundingClientRect of the header.

sticky-situation.css

.sticking {
    box-shadow: none !important;
}

sticky-situation.js

let timeout;
window.addEventListener('scroll', function() {
    clearTimeout(timeout);
    timeout = setTimeout(function() {
        var header = document.querySelector('header.sticky.on-scroll');
        var headerRect = header.getBoundingClientRect();
        if (headerRect.top === 0) {
            header.classList.add('sticking');
        } else {
            header.classList.remove('sticking');
        }
    }, 100);  // Adjust the timeout value to find a good balance between responsiveness and performance
});