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>
相关推荐
洛卡卡了5 分钟前
Sentry 都不想接,这锅还让我背?这xx工作我不要了!
前端·架构
咖啡の猫9 分钟前
Vue 实例生命周期
前端·vue.js·okhttp
JNU freshman23 分钟前
vue 之 import 的语法
前端·javascript·vue.js
剑亦未配妥24 分钟前
Vue 2 响应式系统常见问题与解决方案(包含_demo以下划线开头命名的变量导致响应式丢失问题)
前端·javascript·vue.js
凉柚ˇ27 分钟前
Vue图片压缩方案
前端·javascript·vue.js
慧一居士27 分钟前
vue 中 directive 作用,使用场景和使用示例
前端
慧一居士29 分钟前
vue 中 file-saver 功能介绍,使用场景,使用示例
前端
文心快码BaiduComate1 小时前
文心快码3.5S实测插件开发,Architect模式令人惊艳
前端·后端·架构
Kimser1 小时前
基于 VxeTable 的高级表格选择组件
前端·vue.js
摸着石头过河的石头1 小时前
JavaScript 防抖与节流:提升应用性能的两大利器
前端·javascript