我们看到很多网站,在滚动的时候,广告一般会在一则保持不动
而或者菜单定位在一个地方,滚动也可以不动。
比如说我们的点赞收藏

你滚动网页的时候,它会定在那里不动了。
比说我们的文章目录

你滚动到一定位置时,它就悬浮不再滚动了。
这是怎么实现的呢?
思路
使用 position:sticky
但是兼容不好呀,所以暂时放弃吧
用js的方式也是修改css,只不过是动态修改。感觉滑动距离来修改。
当我们把position改成fixed的时候,给一个top高度,就相对于top高度悬停了。
这个时候我们根据滑动距离,来决定是否给对应的盒子添加悬停样式。
例子
添加滚动监听
比如说我这里使用的是vue.js
在mounted的时候
注册滚动监听
addEventListener('scroll', this.onWindowScroll);
在销毁之前去取消监听
beforeDestroy() {
removeEventListener('scroll', this.onWindowScroll);
},
回调里控制悬浮的具体内容
onWindowScroll() {
let dy = document.documentElement.scrollTop;
let shopAd = document.getElementById('article-shop-ad');
let categoryBox = document.getElementById('article-category-list');
if (shopAd && categoryBox) {
let shopTop = shopAd.offsetTop + shopAd.offsetHeight + 20;
// console.log(shopTop);
if (dy >= shopTop) {
categoryBox.style.top = '10px';
categoryBox.style.position = 'fixed';
} else {
categoryBox.style.position = '';
categoryBox.style.top = (shopTop - dy) + 'px';
}
}
},
这个代码很简单,去动手试试吧。