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

react tab选项卡吸顶实现

react  tab选项卡吸顶实现,直接上代码(代码有注释)

tsx代码

/* eslint-disable react-hooks/exhaustive-deps */
import React, { useEffect, useState } from "react";
import DocumentTitle from 'react-document-title'
import styles from './styles.module.less'// 双旦活动
const Holiday: React.FC<any> = () => {const tabList = [{label:'礼物榜单',value:0},{label:'圣诞活动',value:1},{label:'元旦活动',value:2}]const [active,setactive] = useState<number>(0)const [isFixed,setisFixed] = useState<boolean>(false)//获得页面向左、向上卷动的距离const getScroll = () => {return {left: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0,top: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0};}useEffect(() => {const btnList = document.getElementById('btnList')const offsetTop = btnList?.offsetTop || 0  // offsetTop:元素到offsetParent顶部的距离(当前元素顶部距离最近父元素顶部的距离)window.onscroll = function() {if(getScroll().top >= offsetTop){  // 判断滚动高度是否大于等于 btnList的offsetTopsetisFixed(true)   // 用于判断是否给btnList动态设置style}else{setisFixed(false)}}}, [])return (<DocumentTitle title='双旦活动'><div className={styles.Holiday}><div className={styles.top}><div className={styles.btnList} id="btnList" style={isFixed ? { zIndex: "999",top: "0",position: "fixed", backgroundColor: "#fff" } : {}}>{tabList.map((item:any) => (<div onClick={()=> setactive(item.value)} key={item.value}className={active === item.value ? styles.acitve : ''}>{item.label}</div>))}</div></div><div className={styles.center}><div className={styles.centerBox}><div>双旦活动</div><div>双旦活动</div><div>双旦活动</div><div>双旦活动</div><div>双旦活动</div><div>双旦活动</div><div>双旦活动</div><div>双旦活动</div><div>双旦活动</div><div>双旦活动</div><div>双旦活动</div><div>双旦活动</div><div>双旦活动</div><div>双旦活动</div><div>双旦活动</div><div>双旦活动</div><div>双旦活动</div><div>双旦活动</div><div>双旦活动</div><div>双旦活动</div><div>双旦活动</div><div>双旦活动</div><div>双旦活动</div><div>双旦活动</div><div>双旦活动</div><div>双旦活动</div><div>双旦活动</div><div>双旦活动</div><div>双旦活动</div><div>双旦活动</div><div>双旦活动</div><div>双旦活动</div><div>双旦活动</div><div>双旦活动</div><div>双旦活动</div><div>双旦活动</div><div>双旦活动</div><div>双旦活动</div><div>双旦活动</div></div></div></div></DocumentTitle>)
}
export default Holiday;

less代码

.Holiday {width: 100%;height: 100%;position: relative;display: flex;flex-direction: column;.top{width: 100vw;height: 590px;background: url('../../assets/toplistbg.png') no-repeat;background-size: 100%;position: relative;.btnList{width: 100vw;padding: 20px 37px;box-sizing: border-box;position: absolute;bottom: 28px;height: 120px;display: flex;justify-content: space-between;bottom: 20px;>div{&.acitve{background: rgba(1, 50, 82, 1);color: #fff;}width: 212px;height: 80px;background: rgba(1, 50, 82, 0.1);border-radius: 40px;font-size: 30px;color: #333;display: flex;align-items: center;justify-content: center;font-family: PingFangSC-Regular, PingFang SC;font-weight: 400;}}}.center{width: 100vw;padding: 24px;box-sizing: border-box;.centerBox{width: 100%;background: #044067;border-radius: 20px;box-sizing: border-box;padding: 30px 28px;>div{color: #fff;font-size: 30px;text-align: center;line-height: 80px;}}}
}

效果展示

相关文章:

react tab选项卡吸顶实现

react tab选项卡吸顶实现&#xff0c;直接上代码&#xff08;代码有注释&#xff09; tsx代码 /* eslint-disable react-hooks/exhaustive-deps */ import React, { useEffect, useState } from "react"; import DocumentTitle from react-document-title import s…...

【数据结构】二、线性表:6.顺序表和链表的对比不同(从数据结构三要素讨论:逻辑结构、物理结构(存储结构)、数据运算(基本操作))

文章目录 6.对比&#xff1a;顺序表&链表6.1逻辑结构6.2物理结构&#xff08;存储结构&#xff09;6.2.1顺序表6.2.2链表 6.3数据运算&#xff08;基本操作&#xff09;6.3.1初始化6.3.2销毁表6.3.3插入、删除6.3.4查找 6.对比&#xff1a;顺序表&链表 6.1逻辑结构 顺…...

Golang单例模式学习笔记

前言 单例模式是常用的一种设计模式&#xff0c;一般用于比如客户端、连接的创建等&#xff0c;防止创建多个导致性能消耗。所以我认为单例模式的核心&#xff0c;就是“防止重复”。本文将在Golang中进行单例模式的实现。 实现 版本1——检测-创建 最基础的版本&#xff0…...

Leetcode HOT150

55. 跳跃游戏 给你一个非负整数数组 nums &#xff0c;你最初位于数组的 第一个下标 。数组中的每个元素代表你在该位置可以跳跃的最大长度。 判断你是否能够到达最后一个下标&#xff0c;如果可以&#xff0c;返回 true &#xff1b;否则&#xff0c;返回 false 。 示例 1 …...

仿牛客项目Day1

SpringMVC 架构 spring的前端控制器是DispatcherServlet 模板引擎Thymeleaf 这个还不知道干嘛的 mvc演示 get请求 RequestMapping&#xff1a;声明访问路径和http方法get或set什么的 ResponseBody&#xff1a;java对象转为json格式的数据&#xff0c;表示该方法的返回结…...

Effective C++ 学习笔记 条款17 以独立语句将newed对象置入智能指针

假设我们有个函数用来揭示处理程序的优先权&#xff0c;另一个函数用来在某动态分配所得的Widget上进行某些带有优先权的处理&#xff1a; int priority();void processWidget(std::st1::shared_ptr<Widget> pw, int priority);由于谨记“以对象管理资源”&#xff08;条…...

通过Electron打包前端项目为exe

&#x1f9d1;‍&#x1f393; 个人主页&#xff1a;爱蹦跶的大A阿 &#x1f525;当前正在更新专栏&#xff1a;《JavaScript保姆级教程》、《VUE》、《Krpano》 ✨ 正文 1、 拉取electron官网上的demo&#xff0c;拉下来之后安装依赖&#xff0c;项目跑起来之后&#xff0c;就…...

大模型时代企业知识全生命周期管理解决方案

©作者|Zhongmei 来源|神州问学 摘 要 越来越多的企业开始意识到数据的重要性。同时意识到&#xff0c;企业想保持长远的发展&#xff0c;还需要协调组织协作、利用现有的数据沉淀经验知识、累积数据资产。据IDC调查&#xff0c;目前企业结构化数据仅占到全部数据量的20%…...

C#冒泡排序算法

冒泡排序实现原理 冒泡排序是一种简单的排序算法&#xff0c;其原理如下&#xff1a; 从待排序的数组的第一个元素开始&#xff0c;依次比较相邻的两个元素。 如果前面的元素大于后面的元素&#xff08;升序排序&#xff09;&#xff0c;则交换这两个元素的位置&#xff0c;使…...

【前端寻宝之路】总结学习使用CSS的引入方式

&#x1f308;个人主页: Aileen_0v0 &#x1f525;热门专栏: 华为鸿蒙系统学习|计算机网络|数据结构与算法|MySQL| ​&#x1f4ab;个人格言:“没有罗马,那就自己创造罗马~” #mermaid-svg-BNJBIEvpN0GHNeJ1 {font-family:"trebuchet ms",verdana,arial,sans-serif;f…...

Python中输入输出函数input和print用法

# 读入一个字符串 s input() print(s)abcdef abcdef# 读入一个整数 n int(input()) print(n)5 5# 读入两个整数(空格间隔) # input()表示读入一行字符串 # split()表示以空格间隔切分出多个字符串序列&#xff0c;如果逗号间隔可以加参数split(,) # map()将序列每个元素转为整…...

简单认识Linux

今天带大家简单认识一下Linux&#xff0c;它和我们日常用的Windows有什么不同呢&#xff1f; Linux介绍 Linux内核&发行版 Linux内核版本 内核(kernel)是系统的心脏&#xff0c;是运行程序和管理像磁盘和打印机等硬件设备的核心程序&#xff0c;它提供了一个在裸设备与…...

javascript正则深入

文章目录 一、前言二、高级`API`2.1、模式匹配的用法`(x)`2.2、非捕获括号的模式匹配`(?:x)`2.3、先行断言`x(?=y)`2.4、后行断言`(?<=y)x`2.5、正向否定查找`x(?!y)`2.6、反向否定查找`(?<!y)x`2.7、字符集合和反向字符集合的用法 `[xyz] / [^xyz]`2.8、词边界和非…...

React-封装自定义Hook

1.声明函数 说明&#xff1a;声明一个以use打头的函数 function useToggle(){} 2.封装 说明&#xff1a;在函数体内封装可复用的逻辑 const [value,setValue]useState(true)const toggle()>{setValue(!value)} 3.返回 说明&#xff1a;把组件中用到的状态或者回调retu…...

Spark实战-基于Spark日志清洗与数据统计以及Zeppelin使用

Saprk-日志实战 一、用户行为日志 1.概念 用户每次访问网站时所有的行为日志(访问、浏览、搜索、点击)用户行为轨迹&#xff0c;流量日志2.原因 分析日志&#xff1a;网站页面访问量网站的粘性推荐3.生产渠道 (1)Nginx(2)Ajax4.日志内容 日志数据内容&#xff1a;1.访问的…...

Springboot中Redis的配置使用

新建 向pom.xml中添加依赖&#xff0c;这个可以不用标注版本号 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-data-redis</artifactId></dependency> 配置yml文件&#xff08;文件名不可以错…...

【node版本问题】运行项目报错 PostCSS received undefined instead of CSS string

最近该项目没有做任何修改&#xff0c;今天运行突然跑不起来报错了 PostCSS received undefined instead of CSS string 【原因】突然想起来期间有换过 node 版本为 16.17.1 【解决】将 node 版本换回之前的 14.18.0 就可以了...

Spring揭秘:BeanDefinitionRegistry应用场景及实现原理!

内容概要 BeanDefinitionRegistry接口提供了灵活且强大的Bean定义管理能力&#xff0c;通过该接口&#xff0c;开发者可以动态地注册、检索和移除Bean定义&#xff0c;使得Spring容器在应对复杂应用场景时更加游刃有余&#xff0c;增强了Spring容器的可扩展性和动态性&#xf…...

蓝桥杯(3.5)

789. 数的范围 import java.util.Scanner;public class Main {public static void main(String[] args) {Scanner sc new Scanner(System.in);int n sc.nextInt();int q sc.nextInt();int[] res new int[n];for(int i0;i<n;i)res[i] sc.nextInt();while(q-- ! 0) {int…...

434G数据失窃!亚信安全发布《勒索家族和勒索事件监控报告》

最新态势快速感知 最新一周全球共监测到勒索事件90起&#xff0c;与上周相比数量有所增加。 lockbit3.0仍然是影响最严重的勒索家族&#xff1b;alphv和cactus恶意家族也是两个活动频繁的恶意家族&#xff0c;需要注意防范。 Change Healthcare - Optum - UnitedHealth遭受了…...

使用docker在3台服务器上搭建基于redis 6.x的一主两从三台均是哨兵模式

一、环境及版本说明 如果服务器已经安装了docker,则忽略此步骤,如果没有安装,则可以按照一下方式安装: 1. 在线安装(有互联网环境): 请看我这篇文章 传送阵>> 点我查看 2. 离线安装(内网环境):请看我这篇文章 传送阵>> 点我查看 说明&#xff1a;假设每台服务器已…...

网络六边形受到攻击

大家读完觉得有帮助记得关注和点赞&#xff01;&#xff01;&#xff01; 抽象 现代智能交通系统 &#xff08;ITS&#xff09; 的一个关键要求是能够以安全、可靠和匿名的方式从互联车辆和移动设备收集地理参考数据。Nexagon 协议建立在 IETF 定位器/ID 分离协议 &#xff08;…...

大数据学习栈记——Neo4j的安装与使用

本文介绍图数据库Neofj的安装与使用&#xff0c;操作系统&#xff1a;Ubuntu24.04&#xff0c;Neofj版本&#xff1a;2025.04.0。 Apt安装 Neofj可以进行官网安装&#xff1a;Neo4j Deployment Center - Graph Database & Analytics 我这里安装是添加软件源的方法 最新版…...

1.3 VSCode安装与环境配置

进入网址Visual Studio Code - Code Editing. Redefined下载.deb文件&#xff0c;然后打开终端&#xff0c;进入下载文件夹&#xff0c;键入命令 sudo dpkg -i code_1.100.3-1748872405_amd64.deb 在终端键入命令code即启动vscode 需要安装插件列表 1.Chinese简化 2.ros …...

(二)原型模式

原型的功能是将一个已经存在的对象作为源目标,其余对象都是通过这个源目标创建。发挥复制的作用就是原型模式的核心思想。 一、源型模式的定义 原型模式是指第二次创建对象可以通过复制已经存在的原型对象来实现,忽略对象创建过程中的其它细节。 📌 核心特点: 避免重复初…...

Rust 异步编程

Rust 异步编程 引言 Rust 是一种系统编程语言,以其高性能、安全性以及零成本抽象而著称。在多核处理器成为主流的今天,异步编程成为了一种提高应用性能、优化资源利用的有效手段。本文将深入探讨 Rust 异步编程的核心概念、常用库以及最佳实践。 异步编程基础 什么是异步…...

C# 表达式和运算符(求值顺序)

求值顺序 表达式可以由许多嵌套的子表达式构成。子表达式的求值顺序可以使表达式的最终值发生 变化。 例如&#xff0c;已知表达式3*52&#xff0c;依照子表达式的求值顺序&#xff0c;有两种可能的结果&#xff0c;如图9-3所示。 如果乘法先执行&#xff0c;结果是17。如果5…...

抽象类和接口(全)

一、抽象类 1.概念&#xff1a;如果⼀个类中没有包含⾜够的信息来描绘⼀个具体的对象&#xff0c;这样的类就是抽象类。 像是没有实际⼯作的⽅法,我们可以把它设计成⼀个抽象⽅法&#xff0c;包含抽象⽅法的类我们称为抽象类。 2.语法 在Java中&#xff0c;⼀个类如果被 abs…...

go 里面的指针

指针 在 Go 中&#xff0c;指针&#xff08;pointer&#xff09;是一个变量的内存地址&#xff0c;就像 C 语言那样&#xff1a; a : 10 p : &a // p 是一个指向 a 的指针 fmt.Println(*p) // 输出 10&#xff0c;通过指针解引用• &a 表示获取变量 a 的地址 p 表示…...

Unity中的transform.up

2025年6月8日&#xff0c;周日下午 在Unity中&#xff0c;transform.up是Transform组件的一个属性&#xff0c;表示游戏对象在世界空间中的“上”方向&#xff08;Y轴正方向&#xff09;&#xff0c;且会随对象旋转动态变化。以下是关键点解析&#xff1a; 基本定义 transfor…...