实施粘贴式导航_滚动事件

● 所谓的粘贴式导航,就是当我们滑动页面到某一个位置的时候,导航不会因为滑动而消失,会固定在页面的顶部,我们来看一下如何实现;
● 首先我们要获取我们想要滚动到哪一部分的时候让导航栏显示出来,这就需要我们去获取这一部分的相对于视口的一个位置信息

const section1 = document.querySelector('#section--1');
const initialCoords = section1.getBoundingClientRect();

.getBoundingClientRect(): 这是JavaScript中DOM元素上可用的方法。调用此方法会返回一个 DOMRect 对象,该对象提供了有关元素大小及其相对于视口的位置信息。
● 当我们获取了我们想要移动到那一部分位置信息时候,我们就要来是的导航显示出来,并进行准确的定位

window.addEventListener('scroll', function () {if (window.scrollY > initialCoords.top) nav.classList.add('sticky');else nav.classList.remove('sticky');
});
  1. window.addEventListener(‘scroll’, function () { … }):
    ○ 这是通过 addEventListener 方法向 window 对象添加了一个滚动事件的监听器。每当用户滚动页面时,绑定的函数就会被触发。
  2. if (window.scrollY > initialCoords.top):
    ○ window.scrollY 表示当前页面滚动的垂直距离(即滚动条距离页面顶部的距离)。
    ○ initialCoords.top 是之前通过 getBoundingClientRect() 获取到的 section1 元素顶部相对于视口的位置。
  3. nav.classList.add(‘sticky’) 和 nav.classList.remove(‘sticky’):
    ○ nav 是一个导航条(或菜单)的引用。
    ○ 如果 window.scrollY 大于 initialCoords.top,表示用户已经滚动到了 section1 元素的顶部以上,此时会给 nav 元素添加一个 sticky 类名。
    ○ 如果不满足上述条件(即用户未滚动到 section1 顶部以上),则会移除 nav 元素的 sticky 类名。
    ● 关于这个sticky类名,我们之前就写好,我们来看下它的作用
.nav.sticky {position: fixed;  //CSS 中的定位属性,将导航条固定在视口中的位置,不随页面滚动而移动。background-color: rgba(255, 255, 255, 0.95);  //透明度降低
}

这样的我们就能实现一个简单的粘性导航的效果;
在这里插入图片描述

这种实现粘性导航的方式基本上是比较简单和常见的方法,但是也存在一些潜在的缺点需要考虑:

  1. 性能问题:
    ○ 监听 scroll 事件可能会导致性能问题,特别是在页面有大量内容或者复杂的 DOM 结构时。因为每次滚动都会触发事件处理程序,可能会对页面的流畅性产生一定影响。
  2. 重复计算:
    ○ getBoundingClientRect() 方法在每次滚动时都会重新计算 section1 元素相对于视口的位置。尽管现代浏览器通常对此进行了优化,但如果页面有很多这样的计算,仍可能导致微小的性能损失。
  3. 过渡效果:
    ○ 如果希望实现粘性导航的过渡效果(如淡入淡出、滑动等),这种简单的添加/移除类名的方法可能无法满足需求。此时可能需要额外的 JavaScript 或 CSS 动画来实现更复杂的效果。
  4. 兼容性:
    ○ 虽然大多数现代浏览器都支持 getBoundingClientRect() 和 classList,但在某些较旧的浏览器或设备上可能存在兼容性问题。在这种情况下,可能需要提供备用方案或者使用 polyfill 来解决兼容性问题。
  5. 复杂布局处理:
    ○ 如果页面布局比较复杂,可能会涉及多个元素在不同滚动阶段需要切换粘性导航状态。这时候可能需要更复杂的 JavaScript 逻辑来处理不同情况下的导航行为。

下节课,我们将介绍一种更好的粘性导航的一种方案

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

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

相关文章

Java案例抢红包

目录 一:题目要求: 二:思路分析:(遇见问题先想出完整的思路逻辑再去动手事半功倍) 三:具体代码: 一:题目要求: 二:思路分析:&#x…

Cosine 余弦相似度并行计算的数学原理与Python实现

背景 Cosine 我在LLM与RAG系列课程已经讲了很多次了,这里不在熬述,它在LLM分析中,尤其是在语义相似度的计算中至关重要,在dot attention机制中,也会看到他的身影。这里讲的是纯数学上的运算与python是如何运用相关库进…

JS(JavaScript)的BOM操作

天行健,君子以自强不息;地势坤,君子以厚德载物。 每个人都有惰性,但不断学习是好好生活的根本,共勉! 文章均为学习整理笔记,分享记录为主,如有错误请指正,共同学习进步。…

一文汇总VSCode多光标用法

光标的创建 按住alt,鼠标左键单击,在单击位置生成光标/删除光标 按住ctrlalt,单击↑/↓,在每行同一个位置(若某一行较短,则在行尾)生成光标,这个不会删除光标,只会在光标…

Day61 代码随想录打卡|回溯算法篇---组合优化

本篇是针对上一题的优化,因为在计算所有可能的组合结果时,不是每一条路径都是我们需要遍历的,如图,当n和k都为4的时候,其实最终的结果只有一个[1,2,3,4]是符合结果的。因此我们遍历的时候就不需要遍历每一条边&#xf…

Go线程实现模型-G

G 概述 一个G就代表一个goroutine(或称Go例程),也与go函数相对应。作为编程人员,我们只是使用go语句向Go的运行时系统提交一个并发任务,而Go的运行时系统则会按照我们要求并发地执行它 Go编译器会把go语句变成对内部函数newproc的调用&…

美德政府转移比特币、以太坊引发市场下跌

小编通过链上地址监控,令人意外的发现德国和美国政府都进行了大规模的数字货币转移,转移了价值 1.5 亿美元的比特币和以太坊。这些大额转移势必引起了数字货币市场分析师和投资者的关注。 BTC价格 从今年起德国政府已转移了其持有的相当一部分比特币&…

【MySQL备份】Percona XtraBackup实战篇

目录 1. 前言 2.准备工作 2.1.创建备份目录 2.2.配置/etc/my.cnf文件 2.3.授予root用户BACKUP_ADMIN权限 3.全量备份 4.准备备份 5.数据恢复 6.总结 "实战演练:利用Percona XtraBackup执行MySQL全量备份操作详解" 1. 前言 本文将继续上篇【My…

玩Stable Diffusion不可不知的5款真人模型!大佬都在用!(附模型包)

模型对于AI绘画起决定性作用,今天推荐5款超好用的Stable Diffusion模型。 这些模型都在市面上收获了各种好评,而且各具特色,能满足你对写实人像的各种要求。 1、MajicMIX realisric 麦橘写实 写实系的人像大模型,具有非常好的质…

数据结构笔记第3篇:双向链表

1、双向链表的结构 注意:这里的 "带头" 跟前面我们说的 "头结点" 是两个概念,实际前面的在单链表阶段称呼不严谨,但是为了同学们更好的理解就直接称为单链表的头结点。 带头链表里的头结点,实际为 "哨兵…

勒索病毒--认知与防范

免责声明:本文仅做技术交流与学习... 目录 应急响应-勒索病毒 1、什么是勒索病毒? 勒索病毒是一种新型电脑病毒,主要以RDP爆破、邮件、程序木马、网页挂马的形式进行传播。该病毒性质恶劣、危害极大,一旦感染将给用户带来无法估量的损失。…

已解决 SyntaxError: invalid syntax,Python报错原因和解决方案。

「作者简介」:冬奥会网络安全中国代表队,CSDN Top100,就职奇安信多年,以实战工作为基础著作 《网络安全自学教程》,适合基础薄弱的同学系统化的学习网络安全,用最短的时间掌握最核心的技术。 这篇文章带大家…

C++编程(七)继承

文章目录 一、继承(一)概念(二)语法格式(三)通过子类访问父类中的成员1. 类内2. 类外 (四)继承中的特殊成员函数1. 构造函数2. 析构函数3. 拷贝构造函数4. 拷贝赋值函数 二、多重继承…

怎样把热门抖音短视频下载保存到手机相册?

怎样把热门抖音短视频下载保存到手机相册? 1、在手机上打开抖音短视频APP; 2、打开后搜索或找到要下载保存的抖音短视频; 3、打开短视频后,点击右则的分享,并滑动找到保存到相册; 4、点击后等待完成下载,…

Python实现接糖果小游戏

介绍: 基于Pygame的糖果从屏幕顶部下落的游戏代码。这个游戏包括了一个可以左右移动的篮子来接住下落的糖果,接住糖果会增加得分。 代码: import pygame import random import os# 初始化pygame和设置屏幕大小 pygame.init() screen_width, screen_height 800, 6…

海康视频播放,包含h5和web插件

自行下载 海康开放平台 demo 都写得很清楚,不多描述 1.视频web插件 vue2写法,公共vue文件写法,调用文件即可 开始时需要以下配置,不知道的找对接平台数据的人,必须要,否则播不了 getParameterData: {po…

万字总结随机森林原理、核心参数以及调优思路

万字总结随机森林原理、核心参数以及调优思路 在机器学习的世界里,随机森林(Random Forest, RF)以其强大的预测能力和对数据集的鲁棒性而备受青睐。作为一种集成学习方法,随机森林通过构建多个决策树并将它们的预测结果进行汇总&…

暴雨来袭,陈赫家变“水帘洞”网友:赫哥滴滴打船吗?

在魔都上海,一场突如其来的暴雨 不仅让街道变成了河流,还悄悄上演了一场现实版的“水帘洞”奇遇 而这场奇遇的主角,竟然是喜剧界的明星——陈赫! 这天,乌云密布,电闪雷鸣 魔都的天空仿佛被捅了个窟窿 雨…

吴恩达《LangChain for LLM Application Development》课程笔记

目录 1. 前言 2. 课程笔记 2.1. 模型、提示和解析器 2.2. LLM记忆,上下文管理 2.3. 链式操作 2.4. 文档问答 2.4.1. stuff 方法 2.4.2. 其他方法 2.5. LLM应用评估 2.6. 代理 2.6.1. 预定义工具 2.6.2. 自定义工具 代码资源: 1. 前言 LangC…

文心一言 VS 讯飞星火 VS chatgpt (293)-- 算法导论21.4 2题

二、证明:每个结点的秩最多为 ⌊lgm⌋ 。如果要写代码,请用go语言。 文心一言: 在数据结构和算法中,当我们谈论“结点的秩”时,这通常与某些特定的数据结构(如B树或B树)相关,其中每…