页面侧边栏顶部固定和底部固定方法

news/2024/5/30 1:14:46/文章来源:https://blog.csdn.net/weixin_70563937/article/details/136684515

顶部固定用于侧边栏低于屏幕高度----左侧边栏

底部固定用于侧边栏高于屏幕高度----右侧边栏

vue页面方法 

页面布局

页面样式,因为内容比较多, 只展示主要代码

* {margin: 0;padding: 0;text-align: center;
}
.head {width: 100%;height: 88px;background-color: pinkposition: sticky;top: 0;left: 0;z-index: 999;
}
.body {display: flex;width: 1200px;margin: 0 auto;
}
.sidebar_l {width: 200px;height: 100%;background-color: bluemargin-top: 50px;position: sticky;/* 定位到导航栏下面 */top: 88px;left: 0;
}
.content {width: 600px;margin: 50px;background-color: #ccc
}
.sidebar_r {width: 300px;margin-top: 50px;/* 定位到页面底部 */bottom: 20px;
}

js

注意生命周期

onMounted(() => {// 获取元素let sidebar_r: any = document.querySelector('.sidebar_r');// 获取元素高度let r_h = sidebar_r.offsetHeight;// 获取屏幕高度var window_w = window.innerWidth;window_w < 1200 ? window_w = 1200 : window_w;sidebar_r.style.left = ((window_w - 1200) / 2) + 892 + "px";// 监听页面滚动window.addEventListener("scroll", () => {// 获取屏幕高度var window_h = window.innerHeight;// 获取滚动高度let scrollTop = window.pageYOffset || document.documentElement.scrollTop;// 判断滚动高度是否超过侧边栏高度(判断侧边栏是否滚动到了底部 侧边栏高度-屏幕高度+头部高度88+上下边距50)if (scrollTop >= r_h - window_h + 88 + 50 + 50) {sidebar_r.style.position = "fixed";} else {sidebar_r.style.position = "static";}});// 监听页面大小变化window.addEventListener("resize", () => {// 获取屏幕高度var window_w = window.innerWidth;window_w < 1200 ? window_w = 1200 : window_w;sidebar_r.style.left = ((window_w - 1200) / 2) + 892 + "px";});
})

html原生方法

需要手动计算右边侧边栏高度,可以直接复制运行看效果

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;text-align: center;}.head {width: 100%;height: 88px;background-color: pink;position: sticky;top: 0;left: 0;z-index: 999;}.body {display: flex;width: 1200px;margin: 0 auto;}.sidebar_l {width: 200px;height: 100%;background-color: blue;margin-top: 50px;position: sticky;/* 定位到导航栏下面 */top: 88px;left: 0;}.content {width: 600px;margin: 50px;background-color: #ccc;}.sidebar_r {width: 300px;margin-top: 50px;/* 定位到页面底部 */bottom: 20px;}.box1 {width: 100%;height: 600px;background-color: #0bf349;}.box2 {width: 100%;height: 6000px;background-color: #27d8f0;}.box3 {width: 100%;height: 2000px;background-color: #ed9a15;position: relative;}.bottom {position: absolute;bottom: 0;}</style>
</head><body><!-- 导航栏 --><div class="head">头部</div><!-- 内容区域 --><div class="body"><div class="sidebar_l"><div class="box1">左边侧边栏</div></div><div class="content"><!-- 内容 --><div class="box2">中间内容</div></div><div class="sidebar_r"><!-- 内容 --><div class="box3"><p>右边侧边栏</p><p class="bottom">右边侧边栏底部</p></div></div></div>
</body>
<script>// 获取元素let sidebar_r = document.querySelector('.sidebar_r');// 获取元素高度 html元素因为父元素使用了flex让子元素的高度都变成了一样高,所以获取不到真实的高度,需要手动计算赋值盒子高度,vue可以通过生命周期获取真实的元素高度// let r_h = sidebar_r.offsetHeight;let r_h = 2000;console.log("右边侧边栏高度:", r_h);// 获取屏幕高度var window_w = window.innerWidth;console.log("屏幕高度:", window_w);window_w < 1200 ? window_w = 1200 : window_w;// 这里应该891是因为滚动条宽度为8,900-9,sidebar_r.style.left = ((window_w - 1200) / 2) + 892 + "px";// 监听页面滚动window.addEventListener("scroll", () => {// 获取屏幕高度var window_h = window.innerHeight;// 获取滚动高度let scrollTop = window.pageYOffset || document.documentElement.scrollTop;// 判断滚动高度是否超过侧边栏高度(判断侧边栏是否滚动到了底部 侧边栏高度-屏幕高度+头部高度88+上下边距50)if (scrollTop >= r_h - window_h + 88) {sidebar_r.style.position = "fixed";} else {sidebar_r.style.position = "static";}});// 监听页面大小变化window.addEventListener("resize", () => {// 获取屏幕高度var window_w = window.innerWidth;window_w < 1200 ? window_w = 1200 : window_w;sidebar_r.style.left = ((window_w - 1200) / 2) + 892 + "px";});
</script></html>

计算思路:

高度判断:屏幕高度 - 元素高度 + 顶部离边框的距离

左边定位:屏幕宽度 - 左边元素宽度和间距 + 滚动条宽度

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

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

相关文章

使用kettle批量加载数据到kadb

测试环境 达梦数据库版本&#xff1a;DM Database Server 64 V8 03134284132-20240115-215128-20081&#xff08;官网测试版&#xff09;KADB版本&#xff1a;KADB V003R002C001B0181Kettle版本&#xff1a;pdi-ce-9.4.0.0-343&#xff08;官网下载&#xff09;Python版本&…

WordPress密码丢失,如何修改密码

近期Bluehost虚拟主机不再提供低版本的PHP后&#xff0c;我们将所有网站都迁移到了Hostease管理&#xff0c;他们的虚拟主机提供全版本的PHP&#xff0c;由于很多网站长时间没有登录&#xff0c;导致很多密码都忘记了&#xff0c;下面我就介绍几种修改WordPress密码的方式。 1…

C++训练营:引用传递

大家好&#xff1a; 衷心希望各位点赞。 您的问题请留在评论区&#xff0c;我会及时回答。 一、引用传递 简单来说&#xff0c;“引用”就是给已有的变量起一个别名。引用并没有自己单独的内存空间&#xff0c;作为引用&#xff0c;它和原变量共用一段内存空间。引用的定义格…

压缩json字符串

GZIPOutputStream 需要关闭&#xff0c;而 ByteArrayOutputStream 不需要关闭。具体原因如下&#xff1a; GZIPOutputStream&#xff1a;GZIPOutputStream是一种过滤流&#xff0c;它提供了将数据压缩为GZIP格式的功能。当使用此类的实例写入数据时&#xff0c;它会对数据进行压…

《OWASP TOP10漏洞》

0x01 弱口令 产生原因 与个人习惯和安全意识相关&#xff0c;为了避免忘记密码&#xff0c;使用一个非常容易记住 的密码&#xff0c;或者是直接采用系统的默认密码等。 危害 通过弱口令&#xff0c;攻击者可以进入后台修改资料&#xff0c;进入金融系统盗取钱财&#xff0…

python的函数与类的定义

目录 1.函数 1.函数的定义 2.输入参数与输出参数的类型 3.输入和输出多个参数 1.普通参数 2.含有任意数量的参数 3.关键字参数 4.普通参数与多个参数的结合 2.类 1.类的定义 2.类的实例化 3.继承 1.函数 1.函数的定义 def 函数名(输入参数): 文档字符串 函数体 …

探索并发编程:深入理解 CyclicBarrier 的原理

文章目录 前言一、CyclicBarrier是什么&#xff1f;二、CyclicBarrier工作原理三、CyclicBarrier常用重要的方法四、代码实战讲解五、CyclicBarrier对比CountDownLatch总结 前言 在多线程编程中&#xff0c;同步是一项关键的任务&#xff0c;尤其是当涉及到多个线程需要在某个…

【Web】浅聊Java反序列化之C3P0——JNDI注入利用

目录 简介 原理分析 EXP 前文&#xff1a;【Web】浅聊Java反序列化之C3P0——URLClassLoader利用 【Web】浅聊Java反序列化之C3P0——不出网Hex字节码加载利用 简介 出网的情况下&#xff0c;这个C3P0的Gadget可以和fastjson&#xff0c;Snake YAML , JYAML,Yamlbeans , …

HEU_KMS激活工具(激活windows系统和office)

功能 激活windows系统和office&#xff0c;龙年限定版 步骤 自主选择激活内容和激活方式&#xff0c;快捷方便&#xff0c;注意使用工具的时候退出杀毒软件和防火墙 资源获取 链接&#xff1a;百度网盘 请输入提取码 提取码&#xff1a;q7qy

MySQL用法---MySQL Workbench创建数据库和表

1. 连接数据库 打开软件&#xff0c;点击左下角卡片&#xff0c;输入设置的数据库密码&#xff0c;勾选单选框 2. 了解主页面的组成部分 3. 创建数据库 先点击工具栏的创建按钮 再输入数据库名称 点击 Apply 创建 4. 创建数据表 展开数据库&#xff0c;在Tables上右键&…

下载无水印抖音视频

在抖音看到某些视频想下载&#xff0c;却出现无法保存在本地【显示"作品暂时无法保存,链接已复制"】。或者下载的视频有水印。 而某些微信小程序下载可能需要付费或者有水印。其实我们可以直接使用电脑浏览器直接下载。 举个例子: 这是来自王道官方账号的一条视频链…

如何利用AWS CloudFront 自定义设置SSL

Amazon CloudFront 提供三种选项&#xff0c;可以加速整个网站并从 CloudFront 的边缘站点通过安全的 HTTPS 方式交付内容。除能够安全地从边缘站点交付内容外&#xff0c;您还可以配置 CDN 来使用针对源提取的 HTTPS 连接&#xff0c;这样您的数据就会实现从源到最终用户的端到…

数据结构从入门到精通——堆

堆 前言一、二叉树的顺序结构及实现 (堆&#xff09;1.1二叉树的顺序结构1.2堆的概念及结构 二、堆的练习题答案 三、堆的实现3.1堆向下调整算法3.2堆的创建3.3建堆时间复杂度3.4堆的插入3.5堆的删除3.6堆的代码实现 四、堆的具体实现代码Heap.hHeap.cTest.c堆的初始化堆的销毁…

网络学习:9个计算机的“网络层”知识点

目录 一、IP 地址 1.1 分类表示法&#xff1a; 1.1.1 分类表示地址的其他说明 1.2 无分类编址 CIDR 二、IP 数据报文格式 Q: IP 报文里有什么&#xff1f;可以不按顺序或者字节来讲一讲 三、 路由概念 3.1 路由表 3.2 路由网络匹配 3.3 ARP 解析 3.4 RARP 逆地址解析…

Unity之PUN实现多人联机射击游戏的优化

目录 &#x1f3ae;一、 跳跃&#xff0c;加速跑 &#x1f3ae;二、玩家自定义输入昵称 &#x1f345;2.1 给昵称赋值 &#x1f345;2.2 实现 &#x1f3ae;三、玩家昵称同步到房间列表 &#x1f345;3.1 获取全部玩家 &#x1f345;3.2 自定义Player中的字段 &#…

鸿蒙Harmony应用开发—ArkTS声明式开发(基础手势:Progress)

进度条组件&#xff0c;用于显示内容加载或操作处理等进度。 说明&#xff1a; 该组件从API version 7开始支持。后续版本如有新增内容&#xff0c;则采用上角标单独标记该内容的起始版本。 子组件 无 接口 Progress(options: ProgressOptions<Type>) 创建进度组件&a…

SpringBoot(接受参数相关注解)

文章目录 1.基本介绍2.PathVariable 路径参数获取信息1.代码实例1.index.html2.ParameterController.java3.测试 2.细节说明 3.RequestHeader 请求头获取信息1.代码实例1.index.html2.ParameterController.java3.测试 2.细节说明 4.RequestParameter 请求获取参数信息1.代码实例…

网络基础 - 预备知识(协议、网络协议、网络传输流程、地址管理)

文章目录 1. 认识 协议2. 了解 网络协议2.1 引入 协议分层2.2 OSI 七层模型 与 TCP/IP 四层模型 3. 网络传输 流程&#xff01;&#xff01;&#xff01;3.1 网络传输流程图3.2 关于报头3.3 实例解释 传输过程&#xff08;封装与解包&#xff09; 4. 网络中的地址管理4.1 认识 …

Qt中使用SDL出现error: undefined reference to `qMain(int, char**)‘

在Qt中使用SDL可能会出现下面错误error: undefined reference to qMain(int, char**) 这是因为我们在头文件中包含了SDL.h&#xff0c;这里面将main进行了替换&#xff0c;想要调用SDL_main 我们main.cpp中取消这个宏定义即可 #undef main

基于Java的天然气工程业务管理系统(Vue.js+SpringBoot)

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块三、使用角色3.1 施工人员3.2 管理员 四、数据库设计4.1 用户表4.2 分公司表4.3 角色表4.4 数据字典表4.5 工程项目表4.6 使用材料表4.7 使用材料领用表4.8 整体E-R图 五、系统展示六、核心代码6.1 查询工程项目6.2 工程物资…