在用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. python-django框架-电商项目-项目部署_20191127

    python-django框架-电商项目-项目部署: uwsgi作为web服务器: 在pycharm中启动项目:使用python manage.py runserver 这个runserver是dja ...

  2. FPGA大疆考试准备内容

    1.寄存器与锁存器 锁存器:电平触发的存储单元,在有效电平时间里可以多次改变数据. 优点:    占触发器资源少,缺点是容易产生毛刺.(附上去毛刺的方法:格雷码计数器(*https://blog.cs ...

  3. highcharts series几种写法

    一.数据列 数据列是一组数据集合,例如一条线,一组柱形等.图表中所有点的数据都来自数据列对象,数据列的基本构造是: series : [{ name : '', data : [] }] 提示:数据列 ...

  4. JAVA的堆栈和内存、垃圾回收解说

    1.有关java健壮性特点的真相 很多书上都说java健壮性的特点是因为java使用数组代替了c++的指针:c++最令人头痛的问题就是内存问题,java的健壮性使编程人员不用再考虑内存的问题:这种观点 ...

  5. 两种方法使用js读写cookie实现一个底部广告浮层效果

    下面一个案例实现了js实现一个页面浮层并且使用两种方法使用js读写cookie:来实现用户关闭广告的显示状态: 读者可以将下面代码复制到一个html文件试试效果:html的pre标签未两种js实现的方 ...

  6. leetcode简单题6

    今天的华师 Given a binary tree, return the bottom-up level order traversal of its nodes' values. (ie, fro ...

  7. 吴裕雄--天生自然python编程：turtle模块绘图（3）

    turtle(海龟)是Python重要的标准库之一,它能够进行基本的图形绘制.turtle图形绘制的概念诞生于1969年,成功应用于LOGO编程语言. turtle库绘制图形有一个基本框架:一个小海龟 ...

  8. CORS’s source, Principle and Implementation

    跨域资源共享(CORS) 是一种机制,它使用额外的 HTTP 头来告诉浏览器 让运行在一个 origin (domain) 上的Web应用被准许访问来自不同源服务器上的指定的资源.当一个资源从与该资源 ...

  9. 关于HTTP协议与HTTP状态码的简要介绍

    在互联网时代HTTP协议的重要性无需多言,对于技术岗位的同学们来说理解掌握HTTP协议是必须的.本篇博客就从HTTP协议的演进.特性.重要知识点和工作中常见问题的总结等方面进行简单的介绍.理解掌握了这 ...

  10. html常用事件

    1.onblur 当窗口失去焦点时运行 2.click 点击鼠标触发的事件 3.onfocus 当窗口获得焦点时运行 4.oninput 当元素获得用户输入时运行 5.onsubmit 当提交表单时运 ...