通过js实现页面布局
2024-03-23 18:48:05
（1）请实现上图所示的布局（2）有以下已知条件：center 区域高度必然大于 left、right 区域left、right 区域溢出后与 center 区域共用同一滚动条当 left、right 区域内容溢出后，请实现以下功能：left、right 区域跟随滚动条滚动到底部就固定住，center 区域继续滚动滚动条向上滚动，当 center 区域滚动到和 left、right 相同高度时，left、right 跟随滚动，滚动到顶部时，left、right 同时到达顶部
实现代码：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {padding: 0;margin: 0;}h3 {text-align: center;}.header {position: fixed;left: 0;top: 0;right: 0;height: 50px;line-height: 50px;background-color: burlywood;z-index: 10;}.main {margin: 50px 100px 0;clear: both;box-sizing: border-box;position: relative;}.left {background-color: cornflowerblue;border: 1px rgb(24, 51, 102) solid;float: left;}.right {background-color: darkseagreen;border: 1px rgb(70, 95, 70) solid;float: right;}.left, .right {width: 300px;}.bottom {position: fixed;bottom: 0;}.bottom.left {left: 100px;}.bottom.right {right: 100px;}.top {position: fixed;top: 50;}.top.left {left: 100px;}.top.right {right: 100px;}.center {background-color: cadetblue;border: 1px rgb(26, 76, 78) solid;margin: 0 310px;}pre {line-height: 20px;}.clearfix {overflow: auto;}.clearfix::after {clear: both;}</style></head><body><header class="header"><h3>header</h3></header><main class="main clearfix"><aside id="left" class="left"><h3>left</h3><pre>01234567891011121314151617181920212223242526272829</pre></aside><aside id="right" class="right"><h3>right</h3><pre>01234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859</pre></aside><section class="center"><h3>center</h3><pre>012345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879012345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879</pre></section></main><script>window.onload = () => {// 左边显示Domconst $left = $('left');// 右边显示DOMconst $right = $('right');// 可视区域的高度const clientHeight = document.documentElement.clientHeight;const $leftHeight = $left.offsetHeight - clientHeight;const $rightHeight = $right.offsetHeight - clientHeight;console.log('clientHeight', clientHeight);console.log('$leftHeight', $leftHeight);console.log('$rightHeight', $rightHeight);if($rightHeight<=0) {$right.classList.add('top');}if($leftHeight<=0) {$left.classList.add('top');}window.addEventListener('scroll', event => {const scrollTop = document.documentElement.scrollTop;if ($leftHeight > 0) {if (scrollTop > $leftHeight) {$left.classList.add('bottom');} else {$left.classList.remove('bottom');}}if ($rightHeight > 0) {if (scrollTop > $rightHeight) {$right.classList.add('bottom');} else {$right.classList.remove('bottom');}}})function $(id) {return document.getElementById(id);}}</script></body></html>
通过js实现页面布局相关推荐
- Ext Js MVC系列二 利用Application和Viewport进行应用程序初始化和页面布局
通过上一篇我们已经对Ext js MVC框架开发有了一个大概的了解,这一篇将利用Application和Viewport进行应用程序的初始化和页面布局.我想从以下几方面来进行总结. 1,通过Ext.L ...
- [html] 对于写一个页面布局，html/css/js这三者你是先写哪个后写哪个？
[html] 对于写一个页面布局,html/css/js这三者你是先写哪个后写哪个? 快捷键创建模板html+css写出结构写js做交互 个人简介 我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, ...
- 在线考试系统html页面结果,Node.js在线考试系统——页面布局(学生)
Node.js在线考试系统 1.布局总览 准备界面.jpg 答题界面.jpg 2.页面布局模块分析 1.navBar 页面中的导航栏 2.ready 考试前的准备界面,由三个部分组成 考试开始时间 考 ...
- ppt页面样式html,酷! 不同风格页面布局幻灯片特效js实现
这是一款效果非常炫酷的不同风格页面布局幻灯片特效.该特效中,通过前后导航按钮来切换幻灯片,每个幻灯片中的图片均为不同的布局效果. 该幻灯片特效使用anime.js来制作幻灯片的动画特效,并使用很多CS ...
- 深度解析使用CSS单位px、em、rem、vh、vw、vmin、vmax实现页面布局
1.px:绝对单位,页面按精确像素展示 2.em:相对单位,基准点为父节点字体的大小,如果自身定义了font-size按自身来计算(浏览器默认字体是16px),整个页面内1em不是一个固定的值. em ...
- 页面布局 HTML 4.0 Transitional” VS XHTML 1.0 Transitional 新的不一定就好用！
前言 最近新的 XHTML ,用了一段时间感决虽然是新标准.不过感觉除了标签等的写法更严格了,最显著的差别就是二者之间 页面布局也有恶性的差异,尤其是对 Table 对象的布局方面,firefox, ...
- 七十八、Antd 实现 TodoList 页面布局和Redux入门
2020/11/20. 周五.今天又是奋斗的一天. @Author:Runsen React,相比于Vue,React更加灵活,但是对JavaScript基础的要求也更高一些.我继续学习React A ...
- 后台管理页面布局（左侧导航长度根据右侧内容无限延伸）
2019独角兽企业重金招聘Python工程师标准>>> 如图为标准后台管理页面布局,左侧导航布局一般是设置高度100%来适应所有尺寸的显示器打开的浏览器高度. 但是这种布局会 ...
- android界面布局错位,IOS 浏览器页面布局错位（如：点不到）的分析与解决
IOS 浏览器页面布局错位(如:点不到)的分析与解决 IOS 浏览器软键盘的拉起与收缩.微信 IOS 浏览器底部导航条的显示与隐藏,很容易导致页面布局错位(相对窗体的绝对定位元素): 明明按钮在这里, ...
最新文章
- 系统指纹 中间指纹 web指纹 识别简介
- 订货（bzoj 2424）
- eclipse color theme 主题颜色
- ffmpeg在android上输出滑屏问题处理
- PyTorch实战福利从入门到精通之七——卷积神经网络（LeNet）
- 吴恩达机器学习之多变量线性回归实现部分
- python提取字符串中单词_从字符串中提取单词，删除标点符号并在Python中返回带有分隔单词的列表...
- 赛前集训前的总结（警醒）
- 【Oracle】删除手工创建的数据库
- Python基础之初识类和对象
- python从入门到精通-python从入门到精通视频（全60集）免费高速下载
- Idea中，Terminal 无法联接window终端解决
- 使用docker私有化部署nuget server-proget
- 防抖 节流_坚持造轮子第二天 防抖与节流
- 个人php源码,php个人发卡平台源码 v1.4 免费版
- 数据结构 栈的结构特点及基本操作
- Topic 18. 临床预测模型之缺失值插补方法
- 正则表达式 - 自动生成器
- 在ORACLE中用DBCA创建数据库
- java实现拆分元素,java-将列表沿元素拆分为子列表