scroll 翻译过来就是滚动的，我们使用 scroll 系列的相关属性可以动态的得到该元素的大小、滚动距离等。
scrollHeight 返回自身实际的高度，不包含边框，返回数值不带单位
它看起来很clientHeight相次但是当，它内部文字超过范围时，它的长度也会变好，但是clientHeight不会
scrollTop返回被卷起的上侧距离，返回数值不带单位
如果浏览器的高（或宽）度不足以显示整个页面时，会自动出现滚动条。当滚动条向下滚动时，页面上面被隐藏 掉的高度，我们就称为页面被卷去的头部。滚动条在滚动时会触发 onscroll 事件
注意的一点页面的滚动要用Windows.pageXoffser获取 前面的是元素
案例：仿淘宝固定右侧侧边栏
1.原先侧边栏是绝对定位
2. 当页面滚动到一定位置，侧边栏改为固定定位
3. 页面继续滚动，会让 返回顶部显示出
案例分析
① 需要用到页面滚动事件 scroll 因为是页面滚动，所以事件源是 document
② 滚动到某个位置，就是判断页面被卷去的上部值。
③ 页面被卷去的头部：可以通过window.pageYOffset 获得 如果是被卷去的左侧 window.pageXOffset
④ 注意，元素被卷去的头部是 element.scrollTop , 如果是页面被卷去的头部 则是 window.pageYOffset
⑤ 其实这个值 可以通过盒子的 offsetTop 可以得到，如果大于等于这个值，就可以让盒子固定定位了
大约170左右 把旁边的pink变成固定定位
但不要写死
解决pink块写成fixed然后发生改变问题，var sliderbarTop=sliderbar.offsetTop-bannerTop;给他设置我图下三角的大小
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.slider-bar {
position: absolute;
left: 50%;
top: 300px;
margin-left: 600px;
width: 45px;
height: 130px;
background-color: pink;
}
.w {
width: 1200px;
margin: 10px auto;
}
.header {
height: 150px;
background-color: purple;
}
.banner {
height: 250px;
background-color: skyblue;
}
.main {
height: 1000px;
background-color: yellowgreen;
}
span {
display: none;
position: absolute;
bottom: 0;
}
</style>
</head>
<body>
<div class="slider-bar">
<span class="goBack">返回顶部</span>
</div>
<div class="header w">头部区域</div>
<div class="banner w">banner区域</div>
<div class="main w">主体部分</div>
<script>
var sliderbar=document.querySelector('.slider-bar');
var banner=document.querySelector('.banner');
// console.log(banner.offsetTop);
// 就是被卷去的头部 一定要写到外面 不然就不准了
var bannerTop=banner.offsetTop
// 当我们侧边栏固定定位之后应该发生的数值
var sliderbarTop=sliderbar.offsetTop-bannerTop;
// 获取main主体元素
var main=document.querySelector('.main');
var goBack=document.querySelector('.goBack')
var mainTop=main.offsetTop;
document.addEventListener('scroll',function(){
// window.pageYOffset页面被卷去的头部
// console.log(window.pageYOffset);
// 3.当我们页面被卷去的头部大于等于170此时，侧边栏就要改成固定定位
if(window.pageYOffset>=bannerTop){
sliderbar.style.position='fixed'
sliderbar.style.top=sliderbarTop+'px'
}else{
sliderbar.style.position='absolute'
sliderbar.style.top=300+'px'
}
// 4.当滚到main之后显示出来
if(window.pageYOffset>=mainTop){
goBack.style.display='block'
}else{
goBack.style.display='none'
}
})
</script>
</body>
</html>页面被卷去的头部兼容性解决方案
需要注意的是，页面被卷去的头部，有兼容性问题，因此被卷去的头部通常有如下几种写法：
1. 声明了 DTD，使用 document.documentElement.scrollTop
2. 未声明 DTD，使用 document.body.scrollTop
3. 新方法 window.pageYOffset 和 window.pageXOffset，IE9 开始支持
function getScroll() {
return {
left: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft||0,
top: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0
};
}
使用的时候 getScroll().left三大系列总结
| 三大系列大小对比 | 作用 |
| element.offsetWidth | 返回自身包括 padding、边框、内容区的宽度,返回数值不带单位 |
| element. clientwidth | 返回自身包括 padding、内容区的完度,不含边框,返回数值不帯单位 |
| element. scrollwidth | 返回自身实际的宽度,不含边框,返回数值不带单位 |
mouseenter 和mouseover的区别
当鼠标移动到元素上时就会触发 mouseenter 事件
类似 mouseover，它们两者之间的差别是
mouseover 鼠标经过自身盒子会触发，经过子盒子还会触发。 mouseenter 只会经过自身盒子触发
之所以这样，就是因为mouseenter不会冒泡
跟mouseenter搭配 鼠标离开 mouseleave 同样不会