我们看到很多网站，在滚动的时候，广告一般会在一则保持不动

而或者菜单定位在一个地方，滚动也可以不动。

比如说我们的点赞收藏

你滚动网页的时候，它会定在那里不动了。

比说我们的文章目录

你滚动到一定位置时，它就悬浮不再滚动了。

这是怎么实现的呢？

思路

• CSS方式

使用 position:sticky

但是兼容不好呀，所以暂时放弃吧

• js方式

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

        }
      },

这个代码很简单，去动手试试吧。