html如何实现菜单栏置顶,【CSS】页面滚动，菜单栏悬停怎么实现？

如图

当往上滚动，菜单栏滚动到顶部的位置时，再继续滚动，悬停在顶部。

问：

1、Vue是否有提供这样的控件？

2、如果vue没有，有什么现成的一些轮子吗？(最好兼容性好一点，webapp)

3、如果现成的轮子也没有，怎么实现？

如上，有没有大佬解答下，不胜感激

按照 @游龙翔隼的思路已解决，贴上代码：

var barOffSetTop = document.getElementById('bar').offsetTop;

window.addEventListener('scroll', (e) => {

if(barOffSetTop < document.body.scrollTop){

bar.classList.add('add-fixed')

}else{

bar.classList.remove('add-fixed')

}

});

.add-fixed{

position: fixed;

top: 0;

}

注意：菜单栏的offsetTop不能动态取&#