阳光沙滩
让学习编程变得简单
前端Web滚动如何悬浮不动?
发表于 2020-03-16    阅读次数 90

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

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

比如说我们的点赞收藏

图片描述

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

比说我们的文章目录

图片描述

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

这是怎么实现的呢?

思路

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

        }
      },

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