在用vue开发项目时候，遇到一个问题，首页有代办列表，是固定定位，滚动时候需要监听距离页面顶部的距离，如果很接近顶部则将代办列表展示，首页隐藏，如果再网上翻动则又回到首页。

因为是是fixed定位，所以用得了getBoundingClientRect：用于获取某个元素相对于视窗位置集合。集合中有top，right，bottom，left等属性。

1，语法

top = object.getBoundingClientRect().top;

返回是以px像素为单位。

getBoundingClientRect的实用场景的更多相关文章

  1. C#委托与事件实用场景

    首先,我们需要知道,到底在什么情况下必须使用委托和事件呢? 请看下面的场景:首领A要搞一场鸿门宴,吩咐部下B和C各自带队埋伏在屏风两侧,约定以杯为令:若左手举杯,则B带队杀出:若右手举杯,则C带队杀出 ...

  2. GCD其他实用场景

    GCD线程间通信 dispatch_queue_t queue = dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0);     ...

  3. 使用RabbitMQ实现延迟任务----实用场景

    1. 使用RabbitMQ实现延迟任务

  4. io与Nio的区别及实用场景

    https://blog.csdn.net/wodeyuer125/article/details/39475207

  5. Hadoop大数据分析应用场景

    J 为了满足日益增长的业务变化,京东的京麦团队在京东大数据平台的基础上,采用了hadoop等热门的开源大数据计算引擎,打造了一款为京东运营和产品提供决策性的数据类产品-北斗平台. 一.Hadoop的应 ...

  6. Java实用教程系列之对象的转型

    体现: 父类的引用可以指向子类的对象接口的引用可以指向实现类的对象转型: 向上转型由子类类型转型为父类类型,或者由实现类类型转型为接口类型向上转型一定会成功,是一个隐式转换向上转型后的对象,将只能访问 ...

  7. Linux系统中虚拟设备文件的各种实用用法

    大家好,我是良许. 大家知道,在 Linux 下,一切皆文件,对于设备文件也是如此.我们在工作的过程中,经常会看到 /dev/null 这个玩意,那它到底是什么呢? 专业地讲,/dev/null 是一 ...

  8. Block入门

    iOS4.0开始,Block横空出世,它其实就是c预言的补充,书面点说就是带有自动变量的匿名函数,Block简洁,代码的可读性也高,因此深受广大开发者的喜爱,这一次给大家介绍Block的基本类型和项目 ...

  9. 【CSS3进阶】酷炫的3D旋转透视

    之前学习 react+webpack ,偶然路过 webpack 官网 ,看到顶部的 LOGO ,就很感兴趣. 最近觉得自己 CSS3 过于薄弱,想着深入学习一番,遂以这个 LOGO 为切入口,好好研 ...

随机推荐

  1. 3)ARP到底属于网络层还是链路层

     说白了  就是有些协议起到了承上启下的作用  比较模糊   很难给出一个精确的定位

  2. Linux BASH简单总结

    BASH: 变量的设置规则: 1.变量与变量内容以一个符号"="来链接 2.等号两边不能直接接空白字符 3.变量名称只能是英文字母与数字,但是不能以数字开头 4.变量内容若有空白字 ...

  3. 五、RabbitMQ Java Client基本使用详解

    Java Client的5.x版本系列需要JDK 8,用于编译和运行.在Android上,仅支持Android 7.0或更高版本.4.x版本系列支持7.0之前的JDK 6和Android版本. 加入R ...

  4. HttpClient系统日志配置

    详细介绍在:http://hc.apache.org/httpclient-3.x/logging.html 一般使用context logging基本够用,context logging解释原文如下 ...

  5. iOS商城demo、音乐播放器、视频通话、自定义搜索、转场动画等源码

    iOS精选源码 微信自定义搜索框实现 一个商城Demo,持续更新中 在Object-C中学习数据结构与算法之排序算法 iOS 音乐播放器之锁屏歌词+歌词解析+锁屏效果 XLsn0wPushTimePi ...

  6. B-Tree索引

    翻译自http://dev.mysql.com/doc/refman/5.6/en/index-btree-hash.html 理解B-Tree和Hash的数据结构能够帮助我们预测不同存储引擎下的查询 ...

  7. jenkins使用（3）-设置定时任务

    配置时间如果错误,代码不会运行 *表示任意时刻

  8. 红杉资本的Dropbox上市，国内哪些产品会跟着受益？

    ​ ​每一个估值达到10亿美元以上的互联网.科技独角兽企业,都将上市当做"终极荣光".但事实上,上市只是这些独角兽企业开启全新时代的开端而已.很多气势汹汹且看似前景一片光明的独角兽 ...

  9. Linux中的一些点

    前言 本文记录一些日常使用linux的一些点. 系统负载评估 理解Linux系统负荷 查看 ps -ef [root@deployer ~]# ps -ef UID PID PPID C STIME ...

  10. python基础局部变量、全局变量

    局部变量的作用域只作用与当前函数块(或代码块)中,对函数块(或代码块)之外的重名变量,没有任何影响. 在函数块(或代码块)中,局部变量可用通过global关键字声明变量来改变在函数块(或代码块)之外对 ...