React PC端悬浮锚点吸顶导航

2024-05-06 07:18

本文主要是介绍React PC端悬浮锚点吸顶导航,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

需求描述
  • 实现PC端吸顶导航

实现分析
  • 先采用absolute绝对定位
  • 滚动超过锚点导航时,修改该导航定位为fixed
效果预览

实现方法
/** 锚点导航*/
import React from "react";
import styles from "./index.less";
import classnames from "classnames";
import { ActiveType } from "@17zwd/fe-egg-factory-page/detail/type";interface PageState {// 目录激活项activeItem?: string;// 是否吸顶isSticky?: boolean;
}class AnchorNav extends React.Component<any, PageState> {private scrollTimer;constructor(props) {super(props);this.state = {activeItem: ActiveType.baseInfo,isSticky: false,};}componentDidMount(): void {// 绑定页面滚动事件window.addEventListener("scroll", this.onPageScroll);}componentWillUnmount(): void {// 解绑页面滚动事件window.removeEventListener("scroll", this.onPageScroll);}compare = (prop) => {return function (a, b) {const value1 = a[prop];const value2 = b[prop];return value1 - value2;};};// 页面滚动事件onPageScroll = (): void => {if (this.scrollTimer) {clearTimeout(this.scrollTimer);}this.scrollTimer = setTimeout(() => {// 吸顶const firstItemTop = document.getElementById(ActiveType.baseInfo)?.getBoundingClientRect().top;if (firstItemTop && firstItemTop < 0) {this.setState({isSticky: true,});} else {this.setState({isSticky: false,});}// 动态高亮const viewTops: Array<any> = [];for (const i in ActiveType) {const id = ActiveType[i];const ele = document.getElementById(id);if (!ele) return;const top = ele?.getBoundingClientRect().top;if (top < 0) continue;viewTops.push({id,top,});}viewTops.sort(this.compare("top"));this.setState({activeItem: viewTops[0]?.id,});}, 90);};//跳转到的锚点onScrollToAnchor = (activeItem: string): void => {if (activeItem) {// 找到锚点const anchorElement = document.getElementById(activeItem);// 如果对应id的锚点存在,就跳转到锚点if (anchorElement) {anchorElement.scrollIntoView({ block: "start", behavior: "smooth" });this.setState({activeItem,});}}};getItemName = (en: string): string => {let res = "";switch (en) {case ActiveType.baseInfo:res = "基础信息";break;case ActiveType.certify:res = "资质认证";break;case ActiveType.overview:res = "综合概览";break;case ActiveType.remark:res = "工厂简介";break;case ActiveType.pics:res = "工厂实拍";break;case ActiveType.product:res = "产品案例";break;default:break;}return res;};renderItem = (): JSX.Element => {const { activeItem } = this.state;const items: Array<any> = [];for (const i in ActiveType) {const element = ActiveType[i];if (element) {items.push(element);}}return (<React.Fragment>{items.map((item, index) => {return (<likey={index}onClick={() => this.onScrollToAnchor(item)}className={activeItem === item ? styles.active : ""}><spanclassName={classnames(styles.anchorItem, styles.anchorNoBorder)}>{this.getItemName(item)}</span></li>);})}</React.Fragment>);};render(): JSX.Element {const { isSticky } = this.state;return (<React.Fragment><divclassName={classnames(styles.mainAnchor,isSticky ? styles.positionSticky : styles.positionAbsolute)}><ul className={styles.anchorList}>{this.renderItem()}</ul></div></React.Fragment>);}
}export default AnchorNav;
@import "@/less/mixin.less";// 导航
.positionSticky {position: fixed;margin-left: -124px;z-index: 1;
}
.positionAbsolute {position: absolute;left: -124px;
}
.mainAnchor {top: 0;width: 124px;.anchorList {margin-bottom: 0;padding: 0 24px;width: 112px;box-sizing: border-box;background-color: @background-secondary-color;> li {position: relative;color: @text-thrid-color;transition: all 0.2s linear;&:hover {color: @main-primary-color;}}.anchorItem {display: block;padding: 16px 0;height: 53px;font-size: 16px;line-height: 21px;box-sizing: border-box;border-top: solid 1px @border-primary-color;cursor: pointer;}.anchorNoBorder {border-top: none;}.active {color: @main-primary-color;&::before {position: absolute;content: "";left: -14px;top: 24px;width: 6px;height: 6px;border-radius: 50%;background-color: @main-primary-color;}}}.navBox {visibility: hidden;}
}

这篇关于React PC端悬浮锚点吸顶导航的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/963738

相关文章

HTML5中的Microdata与历史记录管理详解

《HTML5中的Microdata与历史记录管理详解》Microdata作为HTML5新增的一个特性,它允许开发者在HTML文档中添加更多的语义信息,以便于搜索引擎和浏览器更好地理解页面内容,本文将探... 目录html5中的Mijscrodata与历史记录管理背景简介html5中的Microdata使用M

html5的响应式布局的方法示例详解

《html5的响应式布局的方法示例详解》:本文主要介绍了HTML5中使用媒体查询和Flexbox进行响应式布局的方法,简要介绍了CSSGrid布局的基础知识和如何实现自动换行的网格布局,详细内容请阅读本文,希望能对你有所帮助... 一 使用媒体查询响应式布局        使用的参数@media这是常用的

HTML5表格语法格式详解

《HTML5表格语法格式详解》在HTML语法中,表格主要通过table、tr和td3个标签构成,本文通过实例代码讲解HTML5表格语法格式,感兴趣的朋友一起看看吧... 目录一、表格1.表格语法格式2.表格属性 3.例子二、不规则表格1.跨行2.跨列3.例子一、表格在html语法中,表格主要通过< tab

Android实现悬浮按钮功能

《Android实现悬浮按钮功能》在很多场景中,我们希望在应用或系统任意界面上都能看到一个小的“悬浮按钮”(FloatingButton),用来快速启动工具、展示未读信息或快捷操作,所以本文给大家介绍... 目录一、项目概述二、相关技术知识三、实现思路四、整合代码4.1 Java 代码(MainActivi

Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案

《Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案》:本文主要介绍Vue3组件中getCurrentInstance()获取App实例,但是返回nu... 目录vue3组件中getCurrentInstajavascriptnce()获取App实例,但是返回n

JS+HTML实现在线图片水印添加工具

《JS+HTML实现在线图片水印添加工具》在社交媒体和内容创作日益频繁的今天,如何保护原创内容、展示品牌身份成了一个不得不面对的问题,本文将实现一个完全基于HTML+CSS构建的现代化图片水印在线工具... 目录概述功能亮点使用方法技术解析延伸思考运行效果项目源码下载总结概述在社交媒体和内容创作日益频繁的

前端CSS Grid 布局示例详解

《前端CSSGrid布局示例详解》CSSGrid是一种二维布局系统,可以同时控制行和列,相比Flex(一维布局),更适合用在整体页面布局或复杂模块结构中,:本文主要介绍前端CSSGri... 目录css Grid 布局详解(通俗易懂版)一、概述二、基础概念三、创建 Grid 容器四、定义网格行和列五、设置行

前端下载文件时如何后端返回的文件流一些常见方法

《前端下载文件时如何后端返回的文件流一些常见方法》:本文主要介绍前端下载文件时如何后端返回的文件流一些常见方法,包括使用Blob和URL.createObjectURL创建下载链接,以及处理带有C... 目录1. 使用 Blob 和 URL.createObjectURL 创建下载链接例子:使用 Blob

Vuex Actions多参数传递的解决方案

《VuexActions多参数传递的解决方案》在Vuex中,actions的设计默认只支持单个参数传递,这有时会限制我们的使用场景,下面我将详细介绍几种处理多参数传递的解决方案,从基础到高级,... 目录一、对象封装法(推荐)二、参数解构法三、柯里化函数法四、Payload 工厂函数五、TypeScript

Vue3使用router,params传参为空问题

《Vue3使用router,params传参为空问题》:本文主要介绍Vue3使用router,params传参为空问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐... 目录vue3使用China编程router,params传参为空1.使用query方式传参2.使用 Histo