I've got a sticky navbar at the top of my page which has a logo.

When the page scrolls the logo changes to be a bit smaller. This causes a change in the page's Y scroll position. When it gets to a certain point where the scroll threshold is, it is stuck between two positions as the height of the document changes forcing both breakpoints to be continually triggered. (logo flickers between two sizes)

An example of this would be you scroll to say position 100 then the navbar size changes to 59 due to the scroll, then it goes back up to 100 and repeats.

CSS classes are tailwind.

JavaScript doing the operation is below, pretty straight forward.

What are some options of tackling this?

window.addEventListener('scroll', () => scrollFunction());

const navLogo = document.querySelector('.navlogo');

function scrollFunction() {
                if ($(window).scrollTop() > 80) {
                        navLogo.classList.remove('w-56');
                        navLogo.classList.add('w-36');
                } else {
                        navLogo.classList.add('w-56');
                        navLogo.classList.remove('w-36');
                }
}

Any help would be greatly appriciated.