在用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. shared zone "SSL" has no equal addresses: 011F0000 vs 03460000

    在windows上配置nginx的https域名的安全证书时出现的问题. 搜索了一下,都说是因为 Nginx 缓存模块或其他使用共享缓存的模块不能在Windows Vista及以上的window上运行 ...

  2. python之循删list

    先来看下循环遍历删除list元素的一段代码: L=[1,3,1,4,3,6,5] # 0 1 2 3 4 5 6(下标) for i in L: if i%2!=0:#%表示除商取余数,除以2余数为0 ...

  3. REMODE解析

    版权声明:本文为博主原创文章,未经博主允许不得转载. 纯视觉的三维重建(不考虑用结构光的那一类)常用的有两大类方法:一类是SfM,缺点是计算量比较大,做不到实时运行:另一类是KinectFusion为 ...

  4. ajax异步的加深理解

    过去印象中的ajax的异步操作,一直还居然在$.ajax函数内部的异步,真是大错特错,实际的异步操作,是针对整个js文件来的. 今天总算意识到了,实际情况如下: $(function(){ //[弹框 ...

  5. http 3种web会话管理方式

    http是无状态的,一次请求结束,连接断开,下次服务器再收到请求,它就不知道这个请求是哪个用户发过来的.当然它知道是哪个客户端地址发过来的,但是对于我们的应用来说,我们是靠用户来管理,而不是靠客户端. ...

  6. servlet简单概括总结

    最近在看java web的相关内容,不管是整体还是细节,要学习的知识有很多,所以有一个好的学习体系非常重要.在阅读学习一些博客和教程中关于servlet的内容后,现将知识体系和自己的总结体会进行梳理, ...

  7. win7电脑磁盘文件以分组方式展现解决方案

    问题: win7电脑磁盘文件以分组方式展现,具体如下: 解决: 右键磁盘空白处-->分组依据-->选择无:图解如下:

  8. geoserver整合swagger2支持自动生成API文档

    网上各种博客都有关于swagger2集成到springmvc.springboot框架的说明,但作者在整合到geoserver中确碰到了问题,调试一番最后才解决,遂总结一下. swagger2集成只需 ...

  9. TNS-04612: "orcl--117-118" 的 RHS 为空

    安装数据库时,TNS-04612: "orcl--117-118" 的 RHS 为空 解决办法: 把 D:\app\xxx\product\11.2.0\dbhome_1\NETW ...

  10. 插入排序算法&算法分析