粘性导航栏可变大小更改滚动位置

Question

我的页面顶部有一个带有徽标的粘性导航栏。

当页面滚动时，徽标会变小一点。这会导致页面的 Y 滚动位置发生变化。当它到达滚动阈值所在的某个点时，它会卡在两个位置之间，因为文档的高度会发生变化，从而迫使两个断点不断被触发。（标志在两种尺寸之间闪烁）

这方面的一个例子是您滚动到位置 100，然后导航栏大小由于滚动而变为 59，然后返回到 100 并重复。

CSS 类顺风顺水。

JavaScript操作如下，非常简单。

有哪些解决方案？

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');
                }
}

如有任何帮助，我们将不胜感激。

Answer 1

当您说您的导航栏“粘滞”时，您是指 position: sticky; 吗？

用另一个具有固定高度（由大徽标引起的最大尺寸）的元素包裹您的导航栏，并使其成为您的粘性元素，也应该做同样的事情。现在您的实际导航栏将能够调整大小，而无需同时更改文档的高度。

粘性导航栏可变大小更改滚动位置

Sticky Navbar variable size changing scroll position

html

javascript

css

tailwind-css