1.简单看懂offset、scroll,client
1.1 offset
- offset翻译过来就是偏移量,表示元素的偏移量。
- offset属性家族:获取元素真实的宽高和位置
offsetHeight
- 元素盒子模型的高:height + padding+border
offsetWidth
- 元素盒子模型的宽:width + padding+border
offsetLeft
- 获取自己左外边框与offsetParent(距离它最近的相对父级(定位元素) )的左内边框的距离
offsetTop
- 获取自己上外边框与offsetParent(距离它最近的相对父级(定位元素) )的上内边框的距离
- 如果offsetLeft和offsetTop没有相对父级元素,默认指向body
offsetParent和parentNode
- offsetParent 指的是最近的一个相对父级元素(默认指向body)
- parentNode 就是直接父级(标签结构中的父子关系 )
1.2 scroll
scroll表示浏览器滚动时元素的卷曲值,讨论的是网页整体与浏览器之间的关系。
scrollHeight和scrollWidth
- 代表获容器内部可滚动的高度和宽度(height/width + padding)
- 包括由于溢出而无法展示在网页的不可见部分
scrollTop和scrollLeft
-
相对父盒子,元素 向上/向左 卷曲出去(滚出去)的距离
滚动事件
scroll事件是在window对象上发生的,它表示的是页面中相应元素的变化。
1.3 client
client获取的是元素的可视区域
clientWidth和clientHeight
-
不包含border在内的实际宽度(width/height + padding)
clientLeft和clientTop
-
打印出盒子 左侧边框/顶部边框 的厚度
-
几乎不用
2.offset、scroll实现导航栏吸顶
html和css样式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>导航栏吸顶案例</title>
<style>
/* 导航条 CSS样式 */
body,
ul,
li {
margin: 0;
padding: 0;
list-style: none;
}
body {
font-family: "微软雅黑";
}
#navbar {
width: 100%;
height: 50px;
background: rgb(57, 93, 165);
}
#navbar ul {
background: rgb(57, 93, 165);
width: 1500px;
margin: 0 auto; /* 水平居中 */
}
#navbar ul li {
width: 150px;
height: 50px;
padding-left: 0;
display: inline-block;
text-align: center;
font-weight: bold;
}
#navbar ul li a {
text-decoration: none;
color: #fff;
font-size: 20px;
line-height: 50px;
text-align: center;
}
#navbar > ul > li {
float: left;
}
#navbar a:hover {
/* 设置鼠标悬停时的样式*/
text-decoration: underline;
color: orange;
text-decoration: none;
}
</style>
</head>
<body>
<header id="hea">
<h3>这是轮播图</h3>
<h3>这是轮播图</h3>
<h3>这是轮播图</h3>
<h3>这是轮播图</h3>
<h3>这是轮播图</h3>
<h3>这是轮播图</h3>
<h3>这是轮播图</h3>
<h3>这是轮播图</h3>
</header>
<nav id="navbar">
<ul>
<li><a href="#">学校概况</a></li>
<li><a href="#">院系机构</a></li>
<li><a href="#">师资队伍置</a></li>
<li><a href="#">教育教学</a></li>
<li><a href="#">科学研究</a></li>
<li><a href="#">交流合作</a></li>
<li><a href="#">招生与就业</a></li>
<li><a href="#">校园生活</a></li>
<li><a href="#">合规建设</a></li>
<li><a href="#">角色入口</a></li>
</ul>
</nav>
<div id="mainBox">
<p>这是正文示例1</p>
<p>这是正文示例2</p>
<p>这是正文示例3</p>
<p>这是正文示例4</p>
<p>这是正文示例5</p>
<p>这是正文示例6</p>
<p>这是正文示例7</p>
<p>这是正文示例8</p>
<p>这是正文示例9</p>
<p>这是正文示例10</p>
<p>这是正文示例11</p>
<p>这是正文示例12</p>
<p>这是正文示例13</p>
<p>这是正文示例14</p>
<p>这是正文示例15</p>
<p>这是正文示例16</p>
<p>这是正文示例17</p>
<p>这是正文示例18</p>
<p>这是正文示例19</p>
<p>这是正文示例20</p>
<p>这是正文示例21</p>
<p>这是正文示例22</p>
<p>这是正文示例23</p>
<p>这是正文示例24</p>
<p>这是正文示例25</p>
<p>这是正文示例26</p>
<p>这是正文示例27</p>
<p>这是正文示例28</p>
<p>这是正文示例29</p>
<p>这是正文示例30</p>
<p>这是正文示例...</p>
<p>这是正文示例...</p>
<p>这是正文示例...</p>
<p>这是正文示例...</p>
<p>这是正文示例...</p>
<p>这是正文示例...</p>
<p>这是正文示例...</p>
<p>这是正文示例...</p>
<p>这是正文示例...</p>
<p>这是正文示例...</p>
<p>这是正文示例...</p>
<p>这是正文示例...</p>
<p>这是正文示例...</p>
<p>这是正文示例...</p>
<p>这是正文示例...</p>
<p>这是正文示例...</p>
<p>这是正文示例...</p>
<p>这是正文示例...</p>
<p>这是正文示例...</p>
<p>这是正文示例...</p>
<p>这是正文示例...</p>
<p>这是正文示例...</p>
<p>这是正文示例...</p>
<p>这是正文示例...</p>
<p>这是正文示例...</p>
<p>这是正文示例...</p>
<p>这是正文示例...</p>
<p>这是正文示例...</p>
</div>
</body>
</html>
javascript代码
//功能一:鼠标向下滚动到一定位置,导航栏navbar实现吸顶;
//功能二:鼠标回滚到最初的位置,导航栏navbar取消吸顶;
//1.获取导航栏navbar的初始偏移量,即获取navbar的Y坐标
var _navBar = document.getElementById("navbar");
var _navTop = _navBar.offsetTop;
//2.页面window做滚动事件scroll
window.onscroll = function () {
//3.获取页面window卷曲的距离,即文档滚出的距离
var winTop = document.documentElement.scrollTop;
//4.吸顶效果
//每当滚动的时候都需要获取超出窗口的范围,然后和navbar的Y坐标做对比
//如果滚动的距离大于等于navbar的Y坐标,就设置成固定定位,否则去掉navbar定位
if (winTop >= _navTop) {
//吸顶
_navBar.style.position = "fixed";
_navBar.style.top = 0;
} else {
//取消吸顶
_navBar.style.position = "static";
}
};