在用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. python3下scrapy爬虫(第十二卷:解决scrapy数据存储大量数据时阻塞问题）

    之前我们使用scrapy爬取数据,用的存储方式是直接引入PYMYSQL,或者MYSQLDB,案例中数据量并不大,这种数据存储方式属于同步过程,也就是上一条语句执行完才能执行下一条语句,当数据量变大时, ...

  2. CentOS-SendMail服务

    title date tags layout music-id CentOS6.5 SendMail服务安装与配置 2018-09-04 Centos6.5服务器搭建 post 456272749 一 ...

  3. form中采用图片作为提交按钮

    <span style="font-size:14px;"><FORM name="formName" action="xxxx&q ...

  4. android版本更新框架、新闻客户端、音乐播放器、自定义View、Github客户端、指南针等源码

    Android精选源码 XUpdate 一个轻量级.高可用性的Android版本更新框架 Android一个可定制的圆形进度条 Android自定义View分享 打钩动画源码 android音乐文件播 ...

  5. [LC] 161. One Edit Distance

    Given two strings s and t, determine if they are both one edit distance apart. Note: There are 3 pos ...

  6. xpath-helper 插件下载

    链接:https://pan.baidu.com/s/1YuTGrdwwAKQd2sIcuarBHQ 提取码:qb8p

  7. 为什么说iPhone无望恢复中国市场？

    直到现在还记得,iPhone 4在国内当时引发的追捧狂潮.彼时iPhone 4绝对是一机难求,上至土豪下至学生都以拥有iPhone 4为荣.发售接近一年后仍然需要加价,价格动辄达到七八千元,真正成为了 ...

  8. python中sort和sorted排序的相关方法

    Python list内置sort()方法用来排序,也可以用python内置的全局sorted()方法来对可迭代的序列排序生成新的序列. 1)排序基础 简单的升序排序是非常容易的.只需要调用sorte ...

  9. python心得二（编码问题）

    内容编码 字码发展1.ascii(只识别英文)8位就可以表示所有英文,字符数字,1个字节就可以 2.unicode(万国码)最少两个字节中文三个字节 3.utf-8万国码存在空间浪费英文8位中文24位 ...

  10. Hexo快速搭建博客

    1. 准备工作 ~ 安装node.js -> npm -> hexo-cli ~ 安装git -> 版本控制工具 2. 更换npm(nodejs package manager)源 ...