Sticky Navbar variable size changing scroll position-CodePudding

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.

CodePudding user response：

When you say your nav bar is "sticky", do you mean position: sticky;?

Wrapping your nav bar with another element that has a fixed height (the max size caused by the large logo), and making that your sticky element, should also do the same thing. Now your actual nav bar will be able to resize, without also changing the height of the document.