css吸顶特效(elementui vue3官网)

效果如图:当浏览器滚轮在最上面的时候 没什么区别。当鼠标滚轮超出最上面高度时会有这种粒子感 。吸顶遮盖下面内容

javascript 复制代码
首先要 明确 css 基础属性 position: sticky;的用法。再了解
background-image: radial-gradient(transparent 1px, #fff 1px);
background-size: 4px 4px;
backdrop-filter: saturate(50%) blur(4px);

vue 代码:

javascript 复制代码
<template>
  <div style="height: 500px; overflow: auto">
    <div class="top-div">
      <div>
        xx
        <el-button type="info" size="mini">htllo</el-button>
        xx
      </div>
    </div>
    <div>
      <div v-for="item in indexArr" :key="item" style="margin-bottom: 5px">
        {{ item }}+j ioash haugh adhgajd faihdg ioahgaf nFN OIHG OIAHG IOAJSIO JO
        <el-button type="primary">xxasd sud</el-button>
        <el-tag type="warning">xxhasdhiuash </el-tag>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      indexArr: [],
    };
  },
  mounted() {
    setTimeout(() => {
      for (let i = 1; i <= 100; i++) {
        this.indexArr.push(i);
      }
    }, 1000);
  },
  methods: {},
};
</script>

<style lang='scss'>
.top-div {
  position: sticky;
  top: 0;
  left: 0;
  height: 55px;
  border-bottom: 1px solid #ccc;
  background-image: radial-gradient(transparent 1px, #fff 1px);
  background-size: 4px 4px;
  backdrop-filter: saturate(50%) blur(4px);
}
</style>
相关推荐
石金龙9 分钟前
[译] Composition in CSS
前端·css
白水清风12 分钟前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
Ticnix24 分钟前
函数封装实现Echarts多表渲染/叠加渲染
前端·echarts
用户221520442780024 分钟前
new、原型和原型链浅析
前端·javascript
阿星做前端24 分钟前
coze源码解读: space develop 页面
前端·javascript
叫我小窝吧24 分钟前
Promise 的使用
前端·javascript
NBtab42 分钟前
Vite + Vue3项目版本更新检查与页面自动刷新方案
前端
天天扭码1 小时前
来全面地review一下Flex布局(面试可用)
前端·css·面试
用户458203153171 小时前
CSS特异性:如何精准控制样式而不失控?
前端·css
libraG2 小时前
Jenkins打包问题
前端·npm·jenkins