【移动端】菜单的自动展开与收回

news2024/9/24 1:18:59

前言

为了满足手机上菜单栏随用户移动,菜单的自动展示与隐藏,特此记录


基本原理

在这里插入图片描述

实现逻辑

window.addEventListener(‘scroll’, debouncedScrollHandler) – 监听文档视图滚动事件

document.querySelector(‘.header’) – 选择器匹配元素
创建show和hidden样式,控制展示和隐藏

具体实现

  1. 监听滚动事件
    在这里插入图片描述
  2. 滚动修改逻辑

首先通过选择器选取菜单
监听当前移动高度 scrollTop (下移为负,上移为正)
为了让展示更加丝滑,当移动距离大于菜单栏高度时,修改状态Math.abs(height) > divHeight
判断状态,有三种情况

  1. 当第一次进入页面时,下滑隐藏菜单
  2. 当菜单隐藏时,上滑展示菜单
  3. 当菜单展示时,下滑隐藏菜单
// 滚轮时间 (根据上滑,下滑状态判断是展示还是隐藏)
    scroll () {
      const headerDiv = document.querySelector('.header')

      if (headerDiv) {
        const scrollTop = document.documentElement.scrollTop
        // 移动高度 (下移为负,上移为正)
        // 当上移,下移超过一个导航栏高度时,进行展示修改
        const height = this.lastScrollTop - scrollTop
        const divHeight = headerDiv.clientHeight + 10 // 菜单高度(尽量给足余量)
        const hasHidden = headerDiv.classList.contains('hidden')
        const hasShow = headerDiv.classList.contains('show')

        if (!hasHidden && !hasShow) {
          if (height < 0 && Math.abs(height) > divHeight) {
            headerDiv.classList.add('hidden')
          }
        } else if (hasHidden) {
          if (height > 0 && Math.abs(height) > divHeight) {
            headerDiv.classList.remove('hidden')
            headerDiv.classList.add('show')
          }
        } else if (hasShow) {
          if (height < 0 && Math.abs(height) > divHeight) {
            headerDiv.classList.remove('show')
            headerDiv.classList.add('hidden')
          }
        }
        this.lastScrollTop = scrollTop
      }
    },

这个状态变化是按用户使用逻辑判断的,实际上可以精简为两种,
上滑 - 展示菜单
下滑 - 隐藏菜单

if (height > 0 && Math.abs(height) > divHeight) {
          hasHidden && headerDiv.classList.remove('hidden')
          !hasShow && headerDiv.classList.add('show')
        } else if (height < 0 && Math.abs(height) > divHeight) {
          !hasHidden && headerDiv.classList.add('hidden')
          hasShow && headerDiv.classList.remove('show')
        }

其他知识

这样我们已经完成了菜单的展示和隐藏,但是还可以通过一些优化让他展示的更为丝滑

  1. 动画设置 – 在样式里使用动画,达到缓慢展开和收起的效果
.hidden {
  animation: menu-disable 1s;
  transform: translateY(-30px);
}

.show {
  animation: menu-show 1s;
}

@keyframes menu-disable {
  0% {
    transform: none;
  }

  100% {
    transform: translateY(-30px);
  }
}

@keyframes menu-show {
  0% {
    transform: translateY(-30px);
  }

  100% {
    transform: none;
  }
}
  1. 防抖监听

因为scroll会实时监听状态的改变,所以用户每移动一次屏幕,就是调用一次scroll方法,就可能修改一次状态,所以使用上就有一种抖动的感觉.(不过使用上面的高度判断逻辑后,不会那么明显)


在使用sroll方法的时候,套一个防抖函数,就可以解决此问题

 // 定义一个防抖函数
    debounce (func, wait) {
      let timeout;
      return function () {
        const context = this, args = arguments;
        clearTimeout(timeout);
        timeout = setTimeout(() => func.apply(context, args), wait);
      };
    },

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

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

相关文章

论文速递!Auto-CNN-LSTM!新的锂离子电池(LIB)剩余寿命预测方法

论文标题&#xff1a;A Data-Driven Auto-CNN-LSTM Prediction Model for Lithium-Ion Battery Remaining Useful Life 期刊信息&#xff1a;IEEE TII (中科院1区, JCR Q1, IF11.7) 引用&#xff1a;Ren L, Dong J, Wang X, et al. A data-driven auto-CNN-LSTM prediction m…

JavaScript web API part3

web API DOM 日期对象 > 得到当前系统的时间 new这个操作就是实例化 语法 const date new Date() or const date new Date(2004-11-3 08:00:00) 可以指定时间 > 可应用于通过系统时间和指定时间实现倒计时的操作 //得到当前时间const date new Date()console.lo…

多维时序 | Matlab基于BO-LSSVM贝叶斯优化最小二乘支持向量机数据多变量时间序列预测

多维时序 | Matlab基于BO-LSSVM贝叶斯优化最小二乘支持向量机数据多变量时间序列预测 目录 多维时序 | Matlab基于BO-LSSVM贝叶斯优化最小二乘支持向量机数据多变量时间序列预测效果一览基本介绍程序设计参考资料 效果一览 基本介绍 1.Matlab基于BO-LSSVM贝叶斯优化最小二乘支…

Vue介绍、窗体内操作、窗体间操作学习

系列文章目录 第一章 基础知识、数据类型学习 第二章 万年历项目 第三章 代码逻辑训练习题 第四章 方法、数组学习 第五章 图书管理系统项目 第六章 面向对象编程&#xff1a;封装、继承、多态学习 第七章 封装继承多态习题 第八章 常用类、包装类、异常处理机制学习 第九章 集…

树莓派5上手

1 安装系统 Raspberry Pi OS 是基于 Debian 的免费操作系统&#xff0c;针对 Raspberry Pi 硬件进行了优化。Raspberry Pi OS 支持超过 35,000 个 Debian 软件包。树莓派 5 可以安装各种系统&#xff0c;但是如果对于系统没有特殊的要求&#xff0c;还是安装 Raspberry Pi OS …

【MySQL】MySQL索引与事务的透析——(超详解)

前言 &#x1f31f;&#x1f31f;本期讲解关于MySQL索引事务&#xff0c;希望能帮到屏幕前的你。 &#x1f308;上期博客在这里&#xff1a;【MySQL】MySQL表的增删改查&#xff08;进阶篇&#xff09;——之查询操作&#xff08;超级详解&#xff09;-CSDN博客 &#x1f308;感…

CSP-CCF★★★201903-2二十四点★★★

目录 一、问题描述 二、解答 方法一&#xff1a;穷举法&#xff08;只列举了一部分&#xff09; 方法二&#xff1a;中缀表达式直接求值&#xff0c;两个栈&#xff0c;一个存放数值&#xff0c;一个存放符号 方法三&#xff1a;将中缀表达式转换为后缀来计算注意&#xff…

台风,也称为热带气旋,是一种在热带海洋上形成的强烈风暴系统。台风的形成需要满足以下几个条件:

台风&#xff0c;也称为热带气旋&#xff0c;是一种在热带海洋上形成的强烈风暴系统。台风的形成需要满足以下几个条件&#xff1a; 1. **温暖的海水**&#xff1a;台风通常在海面温度至少达到26.5C&#xff08;79.7F&#xff09;的海域形成&#xff0c;因为温暖的海水能够提供…

八股(8)——Spring,SpringBoot

八股&#xff08;8&#xff09;——Spring&#xff0c;SpringBoot 基础1.Spring 是什么&#xff1f;特性&#xff1f;有哪些模块&#xff1f;Spring 有哪些特性呢&#xff1f; 2.Spring 有哪些模块呢&#xff1f;3.Spring 有哪些常用注解呢&#xff1f;Web 开发方面有哪些注解呢…

利用模糊综合评价法进行数值评分计算——算法过程

1、‌模糊综合评价法概述 ‌模糊综合评价法是一种基于模糊数学的综合评价方法&#xff0c;它通过模糊数学的隶属度理论将定性评价转化为定量评价&#xff0c;适用于解决复杂、难以量化的问题。该方法具有结果清晰、系统性强的特点&#xff0c;能够处理多种因素制约下的综合评价…

热门数据恢复软件大盘点

现在大家的数据都喜欢存放在一些电子设备里保存吧。这样既方便存放&#xff0c;也方便我们查找。但是这些设备可能因为病毒、误删除等原因造成数据的丢失。这篇文章我将介绍几款类似易我数据恢复软件的数据恢复工具&#xff0c;减少为数据丢失给我们造成损失。 1.FOXIT数据恢复…

vue国际化

前言 现在的大公司都走国际化路线&#xff0c;我们应用程序也不例外。今天就在 Vue3 项目中整一个比较简单的国际化 背景 之前搞国际化的时候&#xff0c;也搜索了很多帖子&#xff0c;但是没有一个可以完整的实现。今天有空搞了一版&#xff0c;大家有什么问题欢迎留言探讨…

Java设计模式—面向对象设计原则(五) ----->迪米特法则(DP) (完整详解,附有代码+案例)

文章目录 3.5 迪米特法则(DP)3.5.1 概述3.5.2 案例 3.5 迪米特法则(DP) 迪米特法则&#xff1a;Demeter Principle&#xff0c;简称DP 3.5.1 概述 只和你的直接朋友交谈&#xff0c;不跟“陌生人”说话&#xff08;Talk only to your immediate friends and not to stranger…

【CSS in Depth 2 精译_031】5.3 Grid 网格布局的两种替代语法

当前内容所在位置&#xff08;可进入专栏查看其他译好的章节内容&#xff09; 第一章 层叠、优先级与继承&#xff08;已完结&#xff09; 1.1 层叠1.2 继承1.3 特殊值1.4 简写属性1.5 CSS 渐进式增强技术1.6 本章小结 第二章 相对单位&#xff08;已完结&#xff09; 2.1 相对…

Linux服务器配合Xshell+Tensorboard实现深度学习训练过程可视化

问题背景&#xff1a; 在深度学习领域&#xff0c;监控模型的训练过程是非常重要的。TensorBoard 是 TensorFlow 提供的一个可视化工具&#xff0c;可以帮助我们直观地理解模型的训练和验证过程。我们一般在 Windows 系统只需要在自己的浏览器输入localhost:6006就可以观察训练…

[Linux]:进程间通信(上)

✨✨ 欢迎大家来到贝蒂大讲堂✨✨ &#x1f388;&#x1f388;养成好习惯&#xff0c;先赞后看哦~&#x1f388;&#x1f388; 所属专栏&#xff1a;Linux学习 贝蒂的主页&#xff1a;Betty’s blog 1. 进程间通信介绍 1.1 进程间通信的概念 进程间通信简称IPC&#xff08;In…

[通信原理]绪论1:信号 × 通信系统

1、消息、信号与信息 消息&#xff1a; 通信系统要传输的对象&#xff0c;是具体的、物理上存在的东西。也是信息的载体。形式多种&#xff1a; 连续消息&#xff1a;语音、温度、活动图片.离散消息&#xff1a;数据、符号、文字. 信息&#xff1a; 消息中所蕴含的内容&…

MySQL练手题--公司和部门平均工资比较(困难)

一、准备工作 Create table If Not Exists Salary (id int, employee_id int, amount int, pay_date date); Create table If Not Exists Employee (employee_id int, department_id int); Truncate table Salary; insert into Salary (id, employee_id, amount, pay_date) va…

ESP8266+httpServer+GET+POST实现网页验证密码

1. 代码 #include "esp_http_server.h" #include "esp_log.h" #include "web_server.h"// 辅助宏&#xff0c;用于计算两个数中的较小值 #define MIN(a, b) ((a) < (b) ? (a) : (b))static const char *TAG "wifi web_server";c…

游戏算法专题之PRD算法:听说你想凭运气抽中荣耀水晶?

PRD算法全称Pseudo-Random Distribution。是概率分布中的一种常见算法&#xff0c;在游戏开发领域中很常用。 PRD用于控制随机事件的触发概率&#xff0c;使其表现得更加符合预期&#xff0c;相比于传统得随机数生成&#xff0c;PRD算法可以平滑得控制随机事件的触发次数&…