JS第七天
一.元素滚动scroll系列
1.1元素scroll系列属性
使用scroll 系列的相关属性可以动态的得到该元素的大小、滚动距离等。
1.2页面被卷去的头部
如果浏览器的高(或宽)度不足以显示整个页面时,会自动出现滚动条。当滚动条向下滚动时,页面上面被隐藏掉的高度,我们就称为页面被卷去的头部。滚动条在滚动时会触发onscroll事件。
二.3个系列的比较
主要用法:
- offset系列 经常用于获得元素位置offsetLeft offsetTop
- client 经常用于获取元素大小clientWidth clientHeight
- scroll 经常用于获取滚动距离scrollTop scrolleft
- 页面滚动的距离通过window. pagexOffset
获得
三.mouseenter和mouseover的区别
mouseenter鼠标事件
●当鼠标移动到元素上时就会触发mouseenter事件
●类似mouseover ,它们两者之间的差别是
●mouseover 鼠标经过自身盒子会触发, 经过子盒子还会触发。mouseenter 只会经过自身盒子触发
●之所以这样,就是因为mouseenter不会冒泡
●跟mouseenter搭配鼠标离开mouseleave同样不会冒泡
三.案例
1.侧边栏
<!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>
.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;
}
.slider-bar {
position: absolute;
left: 50%;
top: 300px;
margin-left: 600px;
width: 45px;
height: 130px;
background-color: pink;
}
</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 slider = document.querySelector('.slider-bar');
var banner = document.querySelector('.banner');
var bannertop = banner.offsetTop;
var slidertop = slider.offsetTop - bannertop;
var main = document.querySelector('.main');
var maintop = main.offsetTop;
var goback = document.querySelector('.goback');
document.addEventListener('scroll', function () {
if (window.pageYOffset >= bannertop) {
slider.style.position = 'fixed';
slider.style.top = slidertop + 'px';
} else {
slider.style.position = 'absolute';
slider.style.top = '300px';
}
if (window.pageYOffset >= maintop) {
goback.style.display = 'block';
} else {
goback.style.display = 'none';
}
})
</script>
</body>
</html>