<div class="top">我是吸顶div</div>
<p class="back">返回顶部</p>
<script>
// 滚动条的监听事件
// 当滚动条位置发生改变时,触发定义的函数程序
// 可用使用 display 设定 属性值 为 none 或者 block 来控制标签的显示或者隐藏
// 但是过程是瞬间范围成的,不能制作成类似于动画的效果
// 要实现动画的效果,必须要通过改变高度和添加过渡属性完成
// 返回顶部效果
// 原理:给 滚动条高度 设定 这个递减的高度
// 根据一定的时间间隔,执行程序,当高度为0时,终止程序执行
// 通过定时器来执行程序
// 获取div标签对象
var oDiv = document.querySelector('div');
var oP = document.querySelector('p');
window.onscroll = function(){
// 1,获取当前滚动条的高度,通过兼容语法
// 一旦滚动条位置发生改变,就会获取当前滚动条的位置
var h = document.documentElement.scrollTop || document.body.scrollTop;
// console.log(h)
// 2,当滚动条执行至一定的高度,让div显示
if(h > 500){
// oDiv.style.display = 'block';
// 改变高度
oDiv.style.height = '100px';
oP.style.height = '100px';
}else{
// 滚动高度小于0
// 当高度再次变为0,隐藏起来
oDiv.style.height = '0px';
oP.style.height = '0px';
}
}
// 返回顶部
oP.onclick = function(){
// 点击 标签时
// 通过定时器,逐步减少滚动条高度,
var time = setInterval(function(){
// 1 获取当前 滚动条高度 , 必须是兼容语法获取的正确的滚动条高度
var h = document.documentElement.scrollTop || document.body.scrollTop;
// 让浏览器滚动条,每次间隔时间,都递减一个高度
// 可以设定两种方法,有一种不起作用,另一种可以起作用
document.documentElement.scrollTop -= 20 ;
document.body.scrollTop -= 20 ;
// 当滚动条高度为0是,终止定制器
// 判断数值,必须是兼容方式获取的正确数值
if( h === 0 ){
clearInterval(time);
}
} , 100);
}
// BOM操作之事件操作
// 之前给标签绑定过点击事件
// 标签对象.onclick = function(){}
// 1, 事件对象 : 绑定事件的标签对象
// 2, 事件类型 : 触发事件的类型,click是事件类型,onclick称为绑定事件
// 3, function(){} : 事件处理函数,当触发事件时,执行的函数程序
// JavaScript常见的事件类型
// 鼠标事件 : 鼠标的各种点击,移动
// 键盘事件 : 键盘的各种按键
// 表单事件 : form标签相关的事件
// 特殊事件 : 动画终止事件,过渡终止事件,滚动条监听事件...