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

Posted 2023-03-06

【中文标题】粘性导航栏可变大小更改滚动位置

【英文标题】：Sticky Navbar variable size changing scroll position

【发布时间】：2022-01-21 18:26:43

【问题描述】：

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

当页面滚动时，徽标会变小一些。这会导致页面的 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');
                

任何帮助将不胜感激。

【问题讨论】：

您的要求可能使这无法启动，但是例如使用position: fixed; 将您的导航栏从正常的文档流中取出，并在页面顶部添加一些填充以供您使用重新滚动到顶部是停止您所描述的弹出的好方法。

@LyndenNoye 是的，我在想，试图避免在页面顶部有一点填充，但这可能是不可避免的。

当你说你的导航栏是“粘性的”时，你的意思是position: sticky;？用另一个具有固定高度（由大徽标引起的最大尺寸）和透明背景的元素包裹您的导航栏，并使其成为您的粘性元素，也应该做同样的事情。现在您的实际导航栏将能够调整大小，而无需更改文档的高度。

@LyndenNoye 你是绝对的冠军，工作得很好。回想起来很有道理。把它作为你的答案，我会给你应得的荣誉。

不客气，我的伙计。

【参考方案1】：

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

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