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>
相关推荐
高德开放平台43 分钟前
实战案例|借助高德开放平台实现智慧位置服务:路线导航的开发与实践
前端·后端
老前端的功夫1 小时前
# HTTP缓存:从懵懵懂懂到了如指掌
前端
安卓开发者1 小时前
Docker与Nginx:现代Web部署的完美二重奏
前端·nginx·docker
Dorian_Ov01 小时前
GeoPandas+DataFrame实现shapefile文件导入PostGIS数据库
前端·gis
哟哟耶耶1 小时前
Starting again company 03
前端·javascript·vue.js
葡萄城技术团队1 小时前
SpreadJS 赋能在线 Excel:协同编辑与精细化权限管控的技术实现
前端
转转技术团队1 小时前
转转商品中心微前端升级之路
前端
love530love1 小时前
【笔记】解决 ComfyUI 安装节点 ComfyUI-Addoor (葵花宝典)后启动报错:No module named ‘ComfyUI-Addoor’
linux·运维·前端·人工智能·windows·笔记·python
zzywxc7872 小时前
解锁 Rust 开发新可能:从系统内核到 Web 前端的全栈革命
开发语言·前端·python·单片机·嵌入式硬件·rust·scikit-learn
知新坊2 小时前
RustDesk 完整部署教程:支持 Web 管理后台和网页客户端远程,保姆级教学来了!
前端