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

pc端制作一个顶部固定的菜单栏

news 2025/12/21 6:54:14

效果

在这里插入图片描述

hsl颜色

hsl颜色在css中比较方便 https://www.w3school.com.cn/css/css_colors_hsl.asp

  • 色相（hue）是色轮上从 0 到 360 的度数。0 是红色，120 是绿色，240 是蓝色。
  • 饱和度（saturation）是一个百分比值，0％ 表示灰色阴影，而 100％ 是全色。
  • 亮度（lightness）也是百分比，0％ 是黑色，50％ 是既不明也不暗，100％是白色。
    在base.css中，定义基本的颜色变量及其它变量
:root{--header-height: 3.5rem;--body-color: hsl(230, 100%, 96%);--z-fixed: 100;
}

渐变

transition，定义一个元素在不同状态之间切换的时候定义不同的过渡效果，多个属性用逗号隔开

布局

header中定义固定定位

.header {position: fixed;top: 0;left: 0;width: 100%;background-color: var(--body-color);z-index: var(--z-fixed);transition: box-shadow .4s, background-color .4s;
}

定义滚动后，菜单的颜色和阴影。

.shadow-header{box-shadow: 0 2px 16px hsla(0, 0%, 0%, .1);
}

内容部分，定义上下边距

.section {padding-block: 5rem 1rem;
}

js

滚动菜单，通过js实现
js选取要操作的对象 https://developer.mozilla.org/zh-CN/docs/Web/API/Document/getElementsByClassName

const shadowHeader = () =>{const header = document.getElementById('header')this.scrollY >= 50 ? header.classList.add('shadow-header') : header.classList.remove('shadow-header')
}
window.addEventListener('scroll', shadowHeader)

完整代码

以下代码是完整的

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><header class="header"><nav class="nav"><a href="" class="title">2024年第13次安全月活动</a><div><a href="" class="nav_button">登录</a></div></nav></header><main><section id="home"><p>示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字</p></section></main>
<style>
.header{position: fixed;top: 0;left: 0;width: 100%;background-color: hsl(230, 100%, 96%);z-index: 100;transition: box-shadow .4s,background-color .4s;
}
.nav{max-width: 1200px;margin-inline: auto;height: 3.5rem;display: flex;justify-content: space-between;align-items: center;
}
#home{padding-block:5rem 1rem;max-width: 1200px;margin-inline: auto;height: 2000px;background-color: aquamarine;
}
.shadow-header{box-shadow: 0 2px 16px hsla(0, 0%, 0%, .1);
}
</style>
<script>const shadowHeader = () =>{const header = document.getElementsByClassName('header')[0]console.log("header::",header)this.scrollY >= 50 ? header.classList.add('shadow-header') : header.classList.remove('shadow-header')
}
window.addEventListener('scroll', shadowHeader)
</script>
</body>
</html>

相关文章：

pc端制作一个顶部固定的菜单栏

效果 hsl颜色 hsl颜色在css中比较方便 https://www.w3school.com.cn/css/css_colors_hsl.asp 色相&#xff08;hue&#xff09;是色轮上从 0 到 360 的度数。0 是红色&#xff0c;120 是绿色&#xff0c;240 是蓝色。饱和度&#xff08;saturation&#xff09;是一个百分比值…...

编程日记 2024/6/30 23:43:31

ONLYOFFICE 8.1版本桌面编辑器深度体验：创新功能与卓越性能的结合

ONLYOFFICE 8.1版本桌面编辑器深度体验&#xff1a;创新功能与卓越性能的结合 随着数字化办公的日益普及&#xff0c;一款高效、功能丰富的办公软件成为了职场人士的必备工具。ONLYOFFICE团队一直致力于为用户提供全面而先进的办公解决方案。最新推出的ONLYOFFICE 8.1版本桌面编…...

编程日记 2024/6/30 23:42:30

使用Java连接数据库并且执行数据库操作和创建用户登录图形化界面（2）

&#xff08;1&#xff09;在student数据库上创建一个用户表tb_account&#xff0c;该表包含用户id&#xff0c;用户名和密码。 字段名称 数据类型 注释 约束 user_id Char(8) 用户id 主键 user_name char(10) 用户名 不能为空 password char(10) 密码 默认值&a…...

编程日记 2024/6/30 23:41:27

socket编程常见操作

1、连接的建立 分为两种&#xff1a;服务端处理接收客户端的连接&#xff1b;服务端作为客户端连接第三方服务 //作为服务端 int listenfd socket(AF_INET, SOCK_STREAM, 0); bind(listenfd, (struct sockaddr*)&servaddr, sizeof(servaddr))) listen(listenfd, 10); //…...

编程日记 2024/6/30 23:39:26

springcloud-config git配置源加载（部署公钥问题）

使用gitUrl作为配置源 gitee 或者github 中有类似于发布密钥的功能&#xff0c;允许通过私钥只读访问指定的仓库&#xff0c;文档中说的是 限制了git的操作为pull 和 clone。生成私钥的方式文档连接在此 https://gitee.com/help/articles/4181#article-header0 spring config只…...

编程日记 2024/6/30 23:38:24

华为OD机考题HJ24 合唱队

前言 应广大同学要求&#xff0c;开始以OD机考题作为练习题&#xff0c;看看算法和数据结构掌握情况。有需要练习的可以关注下。 描述 N 位同学站成一排&#xff0c;音乐老师要请最少的同学出列&#xff0c;使得剩下的 K 位同学排成合唱队形。 设&#x1d43e;K位同学从左到…...

编程日记 2024/6/30 23:37:23

基于bootstrap的12种登录注册页面模板

基于bootstrap的12种登录注册页面模板&#xff0c;分三种类型&#xff0c;默认简单的登录和注册&#xff0c;带背景图片的登录和注册&#xff0c;支持弹窗的登录和注册页面html下载。 微信扫码下载...

编程日记 2024/6/30 23:36:22

【劳德巴赫 Trace32 高阶系列 3.1 -- trace32 svf 文件操作与 InitState】

文章目录 SVF InitStateJTAG 状态机JTAG Test-Logic-ResetJTAG Run-Test-IdleSVF InitState Format: JTAG.PROGRAM.SVF <file> [/<option>] <option>: IRPRE <value>IRPOST <value>DRPRE <value>DRPOST <value<...

编程日记 2024/6/30 23:35:21

爬虫知识：补环境相关知识

学习目标&#xff1a;知道为什么要补环境&#xff0c;知道要补什么环境&#xff08;使用Proxy检测&#xff09;。没有讲解怎么补 本章没有动手去实操&#xff0c;只是纯理论知识 补环境介绍 DOM与BOM DOM主要关注文档内容和结构&#xff0c;而BOM关注浏览器窗口和功能。在浏…...

编程日记 2024/6/30 23:33:19

Crontab命令详解：轻松驾驭Linux定时任务，提升系统效率

​&#x1f308; 个人主页&#xff1a;danci_ &#x1f525; 系列专栏&#xff1a;《设计模式》《MYSQL》 &#x1f4aa;&#x1f3fb; 制定明确可量化的目标&#xff0c;坚持默默的做事。 引言&#xff1a; crond是Linux系统中用来定期执行命令或指定程序任务的一种服务或软件…...

编程日记 2024/6/30 23:32:17

【Python】探索 Pandas 中的 where 方法：条件筛选的利器

那年夏天我和你躲在 这一大片宁静的海 直到后来我们都还在 对这个世界充满期待 今年冬天你已经不在 我的心空出了一块 很高兴遇见你 让我终究明白 回忆比真实精彩 &#x1f3b5; 王心凌《那年夏天宁静的海》 在数据分析中&#xff0c;Pandas 是一个强大且…...

编程日记 2024/6/30 23:31:16

Pikachu靶场--Sql Inject

参考借鉴 pikachu靶场练习&#xff08;详细&#xff0c;完整&#xff0c;适合新手阅读&#xff09;-CSDN博客 数字型注入(post) 这种类型的SQL注入利用在用户输入处插入数值&#xff0c;而不是字符串。攻击者试图通过输入数字来修改SQL查询的逻辑&#xff0c;以执行恶意操作。…...

编程日记 2024/6/30 23:29:14

【Python从入门到进阶】59、Pandas库中Series对象的操作(二)

接上篇《58、Pandas库中Series对象的操作(一)》 上一篇我们讲解了Pandas库中Series对象的基本概念、对象创建和操作&#xff0c;本篇我们来继续学习Series对象的运算、函数应用、时间序列操作&#xff0c;以及Series的案例实践。 一、Series对象的运算 1. 数值型数据的算术运…...

编程日记 2024/6/30 23:28:13

【PYG】使用datalist定义数据集，创建一个包含多个Data对象的列表并使用DataLoader来加载这些数据

为了使用你提到的封装方式来创建一个包含多个 Data 对象的列表并使用 DataLoader 来加载这些数据&#xff0c;我们可以按照以下步骤进行&#xff1a; 创建数据&#xff1a;生成节点特征矩阵、边索引矩阵和标签。封装数据&#xff1a;使用 Data 对象将这些数据封装起来。使用 D…...

编程日记 2024/6/30 23:26:10

【设计模式】【创建型5-2】【工厂方法模式】

文章目录 工厂方法模式工厂方法模式的结构示例产品接口具体产品工厂接口具体工厂客户端代码 实际的使用 工厂方法模式 工厂方法模式的结构 产品&#xff08;Product&#xff09;&#xff1a;定义工厂方法所创建的对象的接口。 具体产品&#xff08;ConcreteProduct&#xff0…...

编程日记 2024/6/30 23:25:09

python API自动化(Pytest+Excel+Allure完整框架集成+yaml入门+大量响应报文处理及加解密、签名处理)

1.pytest数据参数化 假设你需要测试一个登录功能&#xff0c;输入用户名和密码后验证登录结果。可以使用参数化实现多组输入数据的测试: 测试正确的用户名和密码登录成功 测试正确的用户名和错误的密码登录失败 测试错误的用户名和正确的密码登录失败 测试错误的用户名和密码登…...

编程日记 2024/6/30 23:22:06

【Postman学习】

Postman是一个非常流行的API开发和测试工具&#xff0c;广泛用于Web服务的开发、测试和调试。它提供了一个图形界面&#xff0c;允许用户轻松地构建、发送和管理HTTP(S)请求&#xff0c;同时查看和分析响应。下面是对Postman接口测试工具的详细解释&#xff1a; 1. Postman简介…...

编程日记 2024/6/30 23:19:03

【Linux】IO多路复用——select，poll，epoll的概念和使用，三种模型的特点和优缺点，epoll的工作模式

文章目录 Linux多路复用1. select1.1 select的概念1.2 select的函数使用1.3 select的优缺点 2. poll2.1 poll的概念2.2 poll的函数使用2.3 poll的优缺点 3. epoll3.1 epoll的概念3.2 epoll的函数使用3.3 epoll的优点3.4 epoll工作模式 Linux多路复用 IO多路复用是一种操作系统的…...

编程日记 2024/6/30 23:13:59

IBCS 虚拟专线——让企业用于独立IP

在当今竞争激烈的商业世界中&#xff0c;企业的数字化运营对网络和服务器的性能有着极高的要求。作为一家企业的 IT 主管&#xff0c;我深刻体会到了在网络和服务器配置方面所面临的种种挑战&#xff0c;以及 IBCS 虚拟专线带来的革命性改变。 我们企业在业务扩张的过程中&…...

编程日记 2024/6/30 23:11:58

驾驭巨龙：Perl中大型文本文件的处理艺术

驾驭巨龙&#xff1a;Perl中大型文本文件的处理艺术 Perl&#xff0c;这门被亲切称为“实用提取和报告语言”的编程语言&#xff0c;自从诞生之日起&#xff0c;就以其卓越的文本处理能力闻名于世。在面对庞大的文本文件时&#xff0c;Perl的强大功能更是得到了充分的体现。本…...

编程日记 2024/6/30 23:10:57

eNSP-Cloud(实现本地电脑与eNSP内设备之间通信)

说明&#xff1a; 想象一下&#xff0c;你正在用eNSP搭建一个虚拟的网络世界&#xff0c;里面有虚拟的路由器、交换机、电脑&#xff08;PC&#xff09;等等。这些设备都在你的电脑里面“运行”&#xff0c;它们之间可以互相通信&#xff0c;就像一个封闭的小王国。 但是&#…...

编程新知 2025/12/20 6:32:12

PPT|230页| 制造集团企业供应链端到端的数字化解决方案：从需求到结算的全链路业务闭环构建

制造业采购供应链管理是企业运营的核心环节&#xff0c;供应链协同管理在供应链上下游企业之间建立紧密的合作关系&#xff0c;通过信息共享、资源整合、业务协同等方式&#xff0c;实现供应链的全面管理和优化&#xff0c;提高供应链的效率和透明度&#xff0c;降低供应链的成…...

编程新知 2025/12/18 2:41:24

连锁超市冷库节能解决方案：如何实现超市降本增效

在连锁超市冷库运营中&#xff0c;高能耗、设备损耗快、人工管理低效等问题长期困扰企业。御控冷库节能解决方案通过智能控制化霜、按需化霜、实时监控、故障诊断、自动预警、远程控制开关六大核心技术&#xff0c;实现年省电费15%-60%&#xff0c;且不改动原有装备、安装快捷、…...

编程新知 2025/11/30 16:55:29

最新SpringBoot+SpringCloud+Nacos微服务框架分享

文章目录 前言一、服务规划二、架构核心1.cloud的pom2.gateway的异常handler3.gateway的filter4、admin的pom5、admin的登录核心 三、code-helper分享总结 前言 最近有个活蛮赶的&#xff0c;根据Excel列的需求预估的工时直接打骨折&#xff0c;不要问我为什么&#xff0c;主要…...

编程新知 2025/12/21 2:12:30

OpenPrompt 和直接对提示词的嵌入向量进行训练有什么区别

OpenPrompt 和直接对提示词的嵌入向量进行训练有什么区别 直接训练提示词嵌入向量的核心区别 您提到的代码： prompt_embedding = initial_embedding.clone().requires_grad_(True) optimizer = torch.optim.Adam([prompt_embedding...

编程新知 2025/7/4 0:50:01

.Net Framework 4/C# 关键字（非常用，持续更新...）

一、is 关键字 is 关键字用于检查对象是否于给定类型兼容，如果兼容将返回 true，如果不兼容则返回 false，在进行类型转换前，可以先使用 is 关键字判断对象是否与指定类型兼容，如果兼容才进行转换，这样的转换是安全的。 例如有：首先创建一个字符串对象，然后将字符串对象隐…...

编程新知 2025/9/25 18:41:38

基于matlab策略迭代和值迭代法的动态规划

经典的基于策略迭代和值迭代法的动态规划matlab代码&#xff0c;实现机器人的最优运输 Dynamic-Programming-master/Environment.pdf , 104724 Dynamic-Programming-master/README.md , 506 Dynamic-Programming-master/generalizedPolicyIteration.m , 1970 Dynamic-Programm…...

编程新知 2025/12/7 23:28:25

音视频——I2S 协议详解

I2S 协议详解 I2S (Inter-IC Sound) 协议是一种串行总线协议&#xff0c;专门用于在数字音频设备之间传输数字音频数据。它由飞利浦&#xff08;Philips&#xff09;公司开发&#xff0c;以其简单、高效和广泛的兼容性而闻名。 1. 信号线 I2S 协议通常使用三根或四根信号线&a…...

编程新知 2025/10/7 0:04:52

C++.OpenGL （20/64）混合（Blending）

混合（Blending） 透明效果核心原理 #mermaid-svg-SWG0UzVfJms7Sm3e {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-SWG0UzVfJms7Sm3e .error-icon{fill:#552222;}#mermaid-svg-SWG0UzVfJms7Sm3e .error-text{fill…...

编程新知 2025/9/24 22:51:29

Python Einops库：深度学习中的张量操作革命

Einops&#xff08;爱因斯坦操作库&#xff09;就像给张量操作戴上了一副"语义眼镜"——让你用人类能理解的方式告诉计算机如何操作多维数组。这个基于爱因斯坦求和约定的库&#xff0c;用类似自然语言的表达式替代了晦涩的API调用&#xff0c;彻底改变了深度学习工程…...

编程新知 2025/10/16 12:04:52