当前位置: 首页 > news >正文

实现导航栏吸顶操作

一、使用VueUse插件

// 安装
npm i @vueuse/core

二、点击搜索useScroll

2.1搜索结果如图
在这里插入图片描述

三、使用

// 这是示例代码
import { useScroll } from '@vueuse/core'
const el = ref<HTMLElement | null>(null)
const { x, y, isScrolling, arrivedState, directions } = useScroll(el)
// 我自己的代码
import { useScroll } from '@vueuse/core';
// 直接解构赋值拿到 当鼠标向下滑动时滑动的距离
const { y } = useScroll(window);
// html结构代码
<div class="box" :class="{flotbox: y > 100}"> <div class="box_l"><img v-if="y > 100" src="@/assets/indexLogo1.png" alt=""><img v-else src="@/assets/indexLogo.png" alt=""></div><div class="box_c"><el-menu:default-active="activeIndex"class="el-menu-demo"mode="horizontal"@select="handleSelect"><el-menu-item index="1">首页</el-menu-item><el-menu-item index="2">产品技术</el-menu-item><el-menu-item index="3">解决方案</el-menu-item><el-menu-item index="4">行业洞见</el-menu-item><el-menu-item index="5">关于我们</el-menu-item></el-menu></div>
// css核心代码 使用的是固定定位
.box {position: fixed;top: 0;left: 0;
}

四、当鼠标向下滑动超过100像素时导航栏切换样式
在这里插入图片描述
在这里插入图片描述

相关文章:

实现导航栏吸顶操作

一、使用VueUse插件 // 安装 npm i vueuse/core二、点击搜索useScroll 2.1搜索结果如图 三、使用 // 这是示例代码 import { useScroll } from vueuse/core const el ref<HTMLElement | null>(null) const { x, y, isScrolling, arrivedState, directions } useSc…...

Docker简述与基础部署详解

目录 docker概述 docker的核心思想 docker三大组件 docker优势 容器和虚拟机之间的区别 容器在内核中支持的重要技术 命名空间&#xff08;Namespaces&#xff09; 控制组&#xff08;Control Groups&#xff0c;cgroups&#xff09; 写时复制技术&#xff08;Copy-on…...

(南京观海微电子)——色温介绍

色温是表示光线中包含颜色成分的一个计量单位。从理论上说&#xff0c;黑体温度指绝对黑体从绝对零度&#xff08;&#xff0d;273℃&#xff09;开始加温后所呈现的颜色。黑体在受热后&#xff0c;逐渐由黑变红&#xff0c;转黄&#xff0c;发白&#xff0c;最后发出蓝色光。当…...

入门Linux简单操作

基本命令 scp ✓ scp -r 文件 127.0.0.1&#xff1a;/root/文件 (source->>>>destination) mv cp ✓ cp xxxx ./xxxx date ✓ 修改时间 date -s “yyyy-MM-dd 12:12:59” find ✓ find /home/user -name “*.txt” grep ✓ 管道 软连接 多用户 免密设置 脚…...

操作系统复习 一、二章

操作系统复习 一、二章 文章目录 操作系统复习 一、二章第一章 计算机系统概述处理器中各寄存器的作用指令的执行过程中断存储器层次结构和CacheI/O 通信技术 第二章 操作系统概述大内核微内核大内核微内核 操作系统的定义、目标和功能定义目标和功能 操作系统的发展过程现代操…...

【国内访问github不稳定】可以尝试fastgithub解决这个问题

1、下载 https://github.com/dotnetcore/FastGithub https://github.com/dotnetcore/FastGithub/releases 官网下载即可&#xff0c;比如&#xff0c;我用的是这个&#xff1a;fastgithub_osx-x64.zip&#xff08;点这里下载&#xff09; 2、安装 如下图双击启动即可 3、…...

android:clickable=“false“无效,依然能被点击

android:clickable“false”依然能被点击&#xff0c;该属性意义何在&#xff1f; 在Android中&#xff0c;android:clickable 属性用于指定一个视图&#xff08;View&#xff09;是否可以被点击。当你设置 android:clickable"true" 时&#xff0c;表示该视图可以接…...

Springboot WebFlux项目结合mongodb进行crud

第一步&#xff1a;创建项目 第二步&#xff1a;给mongodb插入数据 第三步&#xff1a;创建实体类 package org.cyl.test02.entity;// Task.java import lombok.Data;Data public class Task {private String id;private String description; }第四步&#xff1a;创建Reposito…...

超维空间M1无人机使用说明书——61、ROS无人机物体识别与精准投放

引言&#xff1a;基于空中物流的项目背景。我们提供了使用基于诗句的物体识别和精准投放、降落。实现原理如下&#xff1a; 1、在ROS下使用机载电脑实现物体识别 2、记载电脑根据反馈的位置发布运动控制指令 3、PX4解析机载电脑发布的命令&#xff0c;作出运动控制 4、设置…...

Flask 小程序菜品搜索

mina/pages/food/index.wxml <!--index.wxml--> <!--1px 750/320 2.34rpx;--> <view class"container"><!--轮播图--><view class"swiper-container"><swiper class"swiper_box" autoplay"{{autoplay}…...

Excel·VBA按指定顺序排序函数

与之前写过的《ExcelVBA数组冒泡排序函数》不同&#xff0c;不是按照数值大小的升序/降序对数组进行排序&#xff0c;而是按照指定数组的顺序&#xff0c;对另一个数组进行排序 以下代码调用了《ExcelVBA数组冒泡排序函数》bubble_sort_arr函数&#xff08;如需使用代码需复制…...

数据结构学习笔记——查找算法中的树形查找(红黑树)

目录 一、红黑树的定义&#xff08;一&#xff09;黑/红结点、叶子节点&#xff08;二&#xff09;黑色完美平衡 二、红黑树的性质&#xff08;一&#xff09;黑高和高度&#xff08;二&#xff09;叶子结点个数 三、红黑树与AVL对比 一、红黑树的定义 红黑树是一棵二叉排序树…...

Debezium发布历史66

原文地址&#xff1a; https://debezium.io/blog/2019/07/25/debezium-0-10-0-beta3-released/ 欢迎关注留言&#xff0c;我是收集整理小能手&#xff0c;工具翻译&#xff0c;仅供参考&#xff0c;笔芯笔芯. Debezium 0.10.0.Beta3 发布 七月 25, 2019 作者&#xff1a; Jir…...

Redis系列之使用Lua脚本

什么是lua脚本&#xff1f; lua语言是一个轻量级的脚本语言&#xff0c;可以嵌入其他语言中使用&#xff0c;调用宿主语言的功能。lua语法简单&#xff0c;小巧&#xff0c;源码一共才200多K&#xff0c;本身不会有太强的功能&#xff0c;很多的语言也支持lua语言&#xff0c;…...

Wargames与bash知识16

Wargames与bash知识16 Bandit24 关卡提示&#xff1a; 一个守护进程正在端口30002上侦听&#xff0c;如果给定bandit24的密码和一个4位数的密码&#xff0c;它将为您提供bandit25的密码。没有办法检索pincode&#xff0c;除非遍历所有10000个组合&#xff0c;称为暴力强制。您…...

关于运维·关于数据库面试题

目录 一、数据库类型 二、数据库引擎 三、mysql数据库类型 四、mysql的约束添加 五、主从复制原理 六、主从方式有几种 七、mysql主从数据不一致的原因 八、mysql的优化 九、什么是事务的特征 十、数据库读写分离的好处 十一、怎样优化sql语句 十二、mysql的同步方…...

MySQL题目示例

文章目录 1.题目示例 1.题目示例 09&#xff09;查询学过「张三」老师授课的同学的信息 SELECT s.*, c.cname, t.tname, sc.score FROM t_mysql_teacher t, t_mysql_course c, t_mysql_student s, t_mysql_score sc WHERE t.tid c.tid AND c.cid sc.cid AND sc.sid s.sid …...

HTML基本语法

HTML基本语法 1.介绍&#xff1a; 1.1超文本&#xff1a; 指的是网页中可以显示的内容(图片&#xff0c;超链接&#xff0c;视频…) 1.2标记&#xff1a;标签(通过标记符号来告诉浏览器网页内容该如何显示) 标记语言中&#xff0c;提供了许多的标签&#xff0c;不同的标签…...

二分图最大匹配——匈牙利算法详解

文章目录 零、前言一、红娘牵线二、二分图最大匹配2.1概念2.2交替路2.3增广路2.4匈牙利算法2.4.1算法原理2.4.2算法示例2.4.3代码实现 3.OJ练习3.1模板3.2棋盘覆盖3.3車的放置 零、前言 关于二分图的基本知识见&#xff1a;二分图及染色法判定 一、红娘牵线 一位红娘近日遇到一…...

【AI视野·今日Robot 机器人论文速览 第七十一期】Fri, 5 Jan 2024

AI视野今日CS.Robotics 机器人学论文速览 Fri, 5 Jan 2024 Totally 11 papers &#x1f449;上期速览✈更多精彩请移步主页 Daily Robotics Papers Machine Learning in Robotic Ultrasound Imaging: Challenges and Perspectives Authors Yuan Bi, Zhongliang Jiang, Felix D…...

树莓派超全系列教程文档--(62)使用rpicam-app通过网络流式传输视频

使用rpicam-app通过网络流式传输视频 使用 rpicam-app 通过网络流式传输视频UDPTCPRTSPlibavGStreamerRTPlibcamerasrc GStreamer 元素 文章来源&#xff1a; http://raspberry.dns8844.cn/documentation 原文网址 使用 rpicam-app 通过网络流式传输视频 本节介绍来自 rpica…...

【人工智能】神经网络的优化器optimizer(二):Adagrad自适应学习率优化器

一.自适应梯度算法Adagrad概述 Adagrad&#xff08;Adaptive Gradient Algorithm&#xff09;是一种自适应学习率的优化算法&#xff0c;由Duchi等人在2011年提出。其核心思想是针对不同参数自动调整学习率&#xff0c;适合处理稀疏数据和不同参数梯度差异较大的场景。Adagrad通…...

Qt Widget类解析与代码注释

#include "widget.h" #include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget) {ui->setupUi(this); }Widget::~Widget() {delete ui; }//解释这串代码&#xff0c;写上注释 当然可以&#xff01;这段代码是 Qt …...

STM32F4基本定时器使用和原理详解

STM32F4基本定时器使用和原理详解 前言如何确定定时器挂载在哪条时钟线上配置及使用方法参数配置PrescalerCounter ModeCounter Periodauto-reload preloadTrigger Event Selection 中断配置生成的代码及使用方法初始化代码基本定时器触发DCA或者ADC的代码讲解中断代码定时启动…...

Qt Http Server模块功能及架构

Qt Http Server 是 Qt 6.0 中引入的一个新模块&#xff0c;它提供了一个轻量级的 HTTP 服务器实现&#xff0c;主要用于构建基于 HTTP 的应用程序和服务。 功能介绍&#xff1a; 主要功能 HTTP服务器功能&#xff1a; 支持 HTTP/1.1 协议 简单的请求/响应处理模型 支持 GET…...

Java入门学习详细版(一)

大家好&#xff0c;Java 学习是一个系统学习的过程&#xff0c;核心原则就是“理论 实践 坚持”&#xff0c;并且需循序渐进&#xff0c;不可过于着急&#xff0c;本篇文章推出的这份详细入门学习资料将带大家从零基础开始&#xff0c;逐步掌握 Java 的核心概念和编程技能。 …...

在WSL2的Ubuntu镜像中安装Docker

Docker官网链接: https://docs.docker.com/engine/install/ubuntu/ 1、运行以下命令卸载所有冲突的软件包&#xff1a; for pkg in docker.io docker-doc docker-compose docker-compose-v2 podman-docker containerd runc; do sudo apt-get remove $pkg; done2、设置Docker…...

【JavaWeb】Docker项目部署

引言 之前学习了Linux操作系统的常见命令&#xff0c;在Linux上安装软件&#xff0c;以及如何在Linux上部署一个单体项目&#xff0c;大多数同学都会有相同的感受&#xff0c;那就是麻烦。 核心体现在三点&#xff1a; 命令太多了&#xff0c;记不住 软件安装包名字复杂&…...

Android 之 kotlin 语言学习笔记三(Kotlin-Java 互操作)

参考官方文档&#xff1a;https://developer.android.google.cn/kotlin/interop?hlzh-cn 一、Java&#xff08;供 Kotlin 使用&#xff09; 1、不得使用硬关键字 不要使用 Kotlin 的任何硬关键字作为方法的名称 或字段。允许使用 Kotlin 的软关键字、修饰符关键字和特殊标识…...

鸿蒙DevEco Studio HarmonyOS 5跑酷小游戏实现指南

1. 项目概述 本跑酷小游戏基于鸿蒙HarmonyOS 5开发&#xff0c;使用DevEco Studio作为开发工具&#xff0c;采用Java语言实现&#xff0c;包含角色控制、障碍物生成和分数计算系统。 2. 项目结构 /src/main/java/com/example/runner/├── MainAbilitySlice.java // 主界…...