css吸顶特效(elementui vue3官网)

news2024/11/15 14:10:49

在这里插入图片描述

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

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

vue 代码:

<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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1080110.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Java 8 引进的一个新特性 Optional

Optional 是 Java 8 引进的一个新特性&#xff0c;通常用于缓解常见的空指针异常问题。 Brian Goetz &#xff08;Java语言设计架构师&#xff09;对Optional设计意图的原话如下&#xff1a; Optional is intended to provide a limited mechanism for library method return…

马蹄集matji oj赛(第十二次)

目录 元素共鸣 欧拉函数 欧拉函数2 小码哥的喜欢数 整数的逆 数的自我 阶乘的质因子 分数个数 质数率 数字游戏 元素共鸣 难度&#xff1a;黄金 0时间限制&#xff1a;1秒 巴占用内存&#xff1a;128M 遥远的大陆上存在着元素共鸣的机制。 建立一个一维坐标系&#x…

保护隐私与增强网络安全之网络代理技术

目录 前言 一、网络代理技术原理 二、网络代理技术类型 1. HTTP代理 2. SOCKS代理 3. DNS代理 4. 加密代理 5. 反向代理 三、网络代理技术应用 1. 加速网络访问速度 2. 绕过网络限制 3. 保护个人隐私 4. 节省带宽 5. 改善网络安全 四、网络代理技术优缺点 网络…

APK大小缩小65%,内存减少70%:如何优化Android App

APK大小缩小65&#xff05;&#xff0c;内存减少70&#xff05;&#xff1a;如何优化Android App 我们一直在努力为我们的Android应用程序构建MVP产品。在开发MVP产品后&#xff0c;我们发现需要进行应用程序优化以提高性能。经过分析&#xff0c;我们发现了以下可以改进的应用…

比特币有助减少腐败;微软 Copilot 每月赔 20 美元;AIGC 明年会“洗冷水澡”丨 RTE 开发者日报 Vol.64

开发者朋友们大家好&#xff1a; 这里是 「RTE 开发者日报」 &#xff0c;每天和大家一起看新闻、聊八卦。我们的社区编辑团队会整理分享 RTE &#xff08;Real Time Engagement&#xff09; 领域内「有话题的 新闻 」、「有态度的 观点 」、「有意思的 数据 」、「有思考的 文…

AMEYA360分享:村田电子搭载了Onsemi公司IoT设备专用IC的新Bluetooth® Low Energy模块开始量产

近年来&#xff0c;所有远程监控、远程控制的用例均要求具备可无线连接的电池驱动IoT设备&#xff0c;而长寿命电池与安全的数据通信功能是其关键。为此&#xff0c;在IoT边缘设备的设计方面&#xff0c;最大的课题是要提高功率效率和安全性。 Type 2EG由于无线与内置微处理器两…

React 状态管理 - Mobx 入门(下)接入实战

目录 Mobx接入实战 Mobx构造复杂应用需要注意的 Mobx5 Or Mobx4 Mobx5 Mobx4 /package.json /src/routes/index.jsx /src/app.jsx /src/index.jsx /src/models/home/index.js /src/models/index.js /src/containers/home/index.jsx Mobx VS Redux Mobx接入实战 对…

RabbitMQ之延迟队列解读

目录 基本介绍 概述 为什么需要引进RabbitMQ延迟队列 应用场景 springboot代码实战 实战架构 工程概述 RabbitConfigDeal 配置类&#xff1a;创建队列及交换机并进行绑定 MessageService业务类&#xff1a;发送消息及接收消息 主启动类RabbitMq01Application&#xff1…

2023年中国医院信息系统发展现状及行业市场规模分析[图]

医院信息系统&#xff0c;亦称“医院管理信息系统”&#xff08;简称HIS&#xff09;&#xff0c;是指利用计算机软硬件技术、网络通信技术等现代化手段&#xff0c;对医院及其所属各部门的人流、物流、财流进行综合管理&#xff0c;对在医疗活动各阶段产生的数据进行采集储存、…

Lab 1: Unix utilities汇总

这个实验主要学习了常用的一些系统调用。 Lab 1: Unix utilities Boot xv6 (easy) git克隆&#xff0c;切换分支&#xff0c;qemu。根据要求进行操作即可。 $ git clone git://g.csail.mit.edu/xv6-labs-2020 $ cd xv6-labs-2020 $ git checkout util $ make qemusleep (ea…

分享一下花店制作微信小程序的步骤是什么

一、准备阶段 在准备阶段&#xff0c;花店需要完成以下任务&#xff1a; 注册微信公众平台账号&#xff1a;首先&#xff0c;花店需要注册一个微信公众平台账号&#xff0c;这个账号将用于创建和管理微信小程序。 确定小程序的功能和需求&#xff1a;花店需要根据自身的业务需…

RISC-V架构 | 飞凌嵌入式FET7110-C国产高性能核心板现货发售!

RISC-V凭借其完全开源免费且可自由修改的特性而备受国内厂商的追捧&#xff0c;在此背景下&#xff0c;飞凌嵌入式联合RISC-V国产处理器厂商赛昉科技(StarFive)基于昉惊鸿7110处理器共同推出FET7110-C核心板。 现在&#xff0c;飞凌嵌入式FET7110-C核心板&#xff08;商业级&a…

2023.10月网络优化项目实战

基础配置 sw2 <Huawei>sy Enter system view, return user view with Ctrl+Z. [Huawei]sy sw2 [sw2]vlan batch 10 20 Info: This operation may take a few seconds. Please wait for a moment...done.[sw2]int e0/0/1 [sw2-Ethernet0/0/1]port link-type access [s…

第十章-输入输出系统

Ⅰ.锁 本质是互斥操作 原因&#xff1a;针对公共资源访问时&#xff0c;临界区若不加以互斥限制&#xff0c;可能导致执行过程中突然的中断导致出现异常。 1.互斥过程 设定互斥量M为二值信号量&#xff0c;0/1&#xff0c;P-&#xff0c;V&#xff0c;现有两个进程A、B共同…

大数据flink篇之三-flink运行环境安装(一)单机Standalone安装

一、安装包下载地址 https://archive.apache.org/dist/flink/flink-1.15.0/ 二、安装配置流程 前提基础&#xff1a;Centos环境&#xff08;建议7以上&#xff09; 安装命令&#xff1a; 解压&#xff1a;tar -zxvf flink-xxxx.tar.gz 修改配置conf/flink-conf.yaml&#xff1…

最新AI创作系统源码ChatGPT网站源码/支持Midjourney,AI绘画/支持OpenAI GPT全模型+国内AI全模型

一、AI创作系统 SparkAi创作系统是基于OpenAI很火的ChatGPT进行开发的Ai智能问答系统和Midjourney绘画系统&#xff0c;支持OpenAI GPT全模型国内AI全模型。本期针对源码系统整体测试下来非常完美&#xff0c;可以说SparkAi是目前国内一款的ChatGPT对接OpenAI软件系统。那么如…

RxJava介绍及基本原理

随着互联网的迅猛发展&#xff0c;Java已成为最广泛应用于后端开发的语言之一。而在处理异步操作和事件驱动编程方面&#xff0c;传统的Java多线程并不总是最佳选择。这时候&#xff0c;RxJava作为一个基于观察者模式、函数式编程和响应式编程理念的库&#xff0c;为我们提供了…

【Nuget】程序包源

程序包源地址(部分) Azure 中国区的官方 NuGet 程序包源地址 https://nuget.cdn.azure.cn/v3/index.json 官方 NuGet 程序包源地址 V2 https://www.nuget.org/api/v2 官方 NuGet 程序包源地址 V3 https://api.nuget.org/v3/index.json MyGet 上 Eto.Forms 框架的程序包源地址 h…

杨冰:分布式数据库助力企业数实融合,跨越数字化转型深水区

近日&#xff0c;2023 inclusion外滩大会在上海黄浦世博园区举办。由赛迪顾问与 OceanBase 联合主办的外滩大会“分布式数据库助力数实融合”见解论坛圆满落幕。 会上&#xff0c;OceanBase CEO 杨冰发表了《分布式数据库助力企业数实融合&#xff0c;跨越数字化转型深水区》的…

一个完整的初学者指南Django-part1

源自&#xff1a;https://simpleisbetterthancomplex.com/series/2017/09/04/a-complete-beginners-guide-to-django-part-1.html 一个完整的初学者指南Django - 第1部分 介绍 今天我将开始一个关于 Django 基础知识的新系列教程。这是一个完整的 Django 初学者指南。材料分为七…