html如何实现菜单栏置顶,【CSS】页⾯滚动，菜单栏悬停怎么
实现？
如图
当往上滚动，菜单栏滚动到顶部的位置时，再继续滚动，悬停在顶部。
问：
1、Vue是否有提供这样的控件？
2、如果vue没有，有什么现成的⼀些轮⼦吗？(最好兼容性好⼀点，webapp)
3、如果现成的轮⼦也没有，怎么实现？
如上，有没有⼤佬解答下，不胜感激
按照 @游龙翔隼的思路已解决，贴上代码：
var barOffSetTop = ElementById('bar').offsetTop;
window.addEventListener('scroll', (e) => {
if(barOffSetTop < document.body.scrollTop){
bar.classList.add('add-fixed')
}else{
ve('add-fixed')
}
});
.add-fixed{
position: fixed;
top: 0;
}
注意：菜单栏的offsetTop不能动态取，不然置顶后offsetTop的值就改变了，滑动回来的时候，菜单栏⽆法复位。
回答：
position: sticky
⽤sticky定位就⾏了，具体看 这⾥ 注：⽬前兼容性较差
之前也做过类似的东西，实现⽐较简单，来说下思路：
1.监听滚动事件
2.判断菜单dom是否超出视窗
3.超出后使⽤绝对定位，你这⾥应该⽤fixed吧，固定在顶部
回答：
需要监听滚动，当滚动到你想要的位置时，把那个需要固定的元素dom拷贝⼀份出来，然后fixed，此时需要把之前那个dom隐藏起来(visibiliy:hidden)；依次判断，当滚动到需要位置时，再把这个copy的dom隐藏起来，把之前的显⽰出来。。。
回答：
代码仅供参考
Insert title here
div{width:800px;}
#head{height:200px; background:#CC6699; z-index:1; position:absolute;}
#body{background:#FFCC99; height:500px; padding-top:200px;}
#foot{height:500px; background:#CCFFFF;}
head
body
foot
var head = ElementById("head");
var bodyHeight = ElementById("body").offsetHeight;
var foot = ElementById("foot");
var footHeight = foot.offsetHeight;
var t = document.documentElement.scrollTop || document.body.scrollTop;
if (t < 150) return; // 150 ⾃⾏修改，就是你说的 offsetTop 吧(？)
if (t > 150 && t < (bodyHeight - window.innerHeight + 160)) { // 160 是我⾃⼰的另⼀个数值，⽆视即可
p = t - 150;
}
}
html如何设置图片滚动回答：
fixed 在ios 端 兼容性很差 楼主怎么整的

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。