滚动条小实验 BOM时间操作

  <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标签相关的事件

        // 特殊事件 : 动画终止事件,过渡终止事件,滚动条监听事件...