<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标签相关的事件
        // 特殊事件 : 动画终止事件,过渡终止事件,滚动条监听事件...

滚动条小实验 BOM时间操作的更多相关文章

  1. 小笔记:Timer定时间隔时间操作

    小笔记:Timer定时间隔时间操作,后面有时间再补充和完善: public class TimingSvc { /// <summary> /// 定时器,执行定时任务 /// </ ...

  2. Hadoop之词频统计小实验

    声明:    1)本文由我原创撰写,转载时请注明出处,侵权必究. 2)本小实验工作环境为Ubuntu操作系统,hadoop1-2-1,jdk1.8.0. 3)统计词频工作在单节点的伪分布上,至于真正实 ...

  3. 理解JS闭包的几个小实验

    学了JavaScript有一段时间了,但是对闭包还是不太理解,于是怀着心中的疑问做了几个小实验,终于有点明白了. 首先看一下MDN上的定义:闭包是函数和声明该函数的词法环境的组合. 简单来说,闭包是一 ...

  4. '林子雨大数据' 实验3 HBase操作与接口编程

    "林子雨大数据" 实验3 HBase操作与接口编程 环境搭建 VM虚拟机和Ubuntu系统的安装 在Windows中使用VirtualBox安装Ubuntu虚拟机(2020年7月版 ...

  5. MongoDB 主从复制小实验

    MongoDB 主从复制小实验 操作环境描述:WIN8  64位操作系统,内装虚拟机为CentOS 5.5 32位系统. 操作描述:跟其他关系型数据库类似,在主库进行数据操作,将数据同步到从节点,从节 ...

  6. entity framework 时间操作

    ).FirstOrDefault(); if (useractiveentity == null) { UserActive userActive = new UserActive(); userAc ...

  7. 1.4 Crack小实验

    0_day 第一章 基础知识 1.4 Crack小实验 <0day_2th>王清 著 电子书 下载链接:https://pan.baidu.com/s/11TgibQSC3-kYwCInm ...

  8. Python常用时间操作总结【取得当前时间、时间函数、应用等】转载

    Python常用时间操作总结[取得当前时间.时间函数.应用等] 转载  2017-05-11   作者:清风乐逍遥    我要评论 这篇文章主要介绍了Python常用时间操作,包括取得当前时间.时间函 ...

  9. arduino新入手体验:三个小实验

    新入手体验:三个小实验 一:一个LED闪烁 控制要求:1个LED灯,每隔50ms闪烁一次 实物连接图: 控制代码: //2018.6/11 ;//定义数字接口10,对应 void setup() { ...

  10. JavaScript笔记——BOM的操作和浏览器的检测

    BOM的操作 BOM 也叫浏览器对象模型,它提供了很多对象,用于访问浏览器的功能.BOM 缺少规范,每个浏览器提供商又按照自己想法去扩展它,就可能存在浏览器不兼容的情况,那么浏览器共有对象就成了事实的 ...

随机推荐

  1. seaJS简介

    所有版本的 zip 包请在这里下载:seajs/tags 解压后,目录说明如下: dist -- sea.js 等压缩好的文件,直接可用 docs -- 使用文档 lib -- 给 Node.js 用 ...

  2. 我是如何搭建ChatGPT并嵌入到微信公众号的?

    前言 体验方式:薇辛搜索 龚众号 [程序员Jason],关注并点击发消息,点菜单ChatGPT 然后翻到最下面点[阅读原文]就可以了. ChatGPT对某些国家是不提供服务的,所以一般是用不了,除非是 ...

  3. 力扣455(java&python)-分发饼干(简单)

    题目: 假设你是一位很棒的家长,想要给你的孩子们一些小饼干.但是,每个孩子最多只能给一块饼干. 对每个孩子 i,都有一个胃口值 g[i],这是能让孩子们满足胃口的饼干的最小尺寸:并且每块饼干 j,都有 ...

  4. 力扣6(java)-Z字形变换(中等)

    题目: 将一个给定字符串 s 根据给定的行数 numRows ,以从上往下.从左到右进行 Z 字形排列. 比如输入字符串为 "PAYPALISHIRING" 行数为 3 时,排列如 ...

  5. DNS高可用设计--软件高可用

    DNS是网络的基础服务,网络上的各种应用对DNS的依赖性很高.DNS的稳定,直接决定了上层应用服务的稳定.那如何保障DNS服务的高可用呢?我们先来看下高可用的概念: 高可用 高可用(High avai ...

  6. 纯css高斯背景模糊(毛玻璃,伪元素,完整实例)

    先上效果图: 写博客不管是做笔记还是干啥,直接上源码不行么,还不放效果图,拆分成几段谁慢慢看,慢慢理解去 自己动手,丰衣足食,上代码: <!DOCTYPE HTML> <html l ...

  7. 【详细教程】手把手教你开通YouTube官方API接口(youtube data api v3)

    一.背景调查 1.1 youtube介绍 众所周知,youtube是目前全球最大的视频社交平台,该平台每天产生大量的视频内容,涵盖各种主题和类型,从音乐视频到教育内容,再到娱乐节目和新闻报道等.You ...

  8. 10、操作系统安全加固-Linux加固

    1.账号管理与认证授权 1.1.为不同的管理员分配不同的账号 目的:根据不同用途设置不同账户账号,提高安全层级 实施方法: 1.设置高风险文件为最小权限,如:passwd.shadow.group.s ...

  9. 用 Certbot-auto 在 letsencrypt.org申请免费 SSL 证书实现 HTTPS

    参考帖子 https://www.cnblogs.com/lzpong/p/6433189.html https://www.cnblogs.com/756623607-zhang/p/1163850 ...

  10. 仿网易云音乐-微信小程序开发

    1.很多时候要找到完整的API接口很难,但网易云音乐的数据API是可以得到完整的. 安装API:https://github.com/Binaryify/NeteaseCloudMusicApi,只需 ...