你了解getBoundingClientRect()?
理解:getBoundingClientRect用于获取某个元素相对于视窗的位置集合。集合中有top, right, bottom, left等属性。
1.语法:这个方法没有参数。
rectObject = object.getBoundingClientRect();
2.返回值类型:
rectObject.top:元素上边到视窗上边的距离;
rectObject.right:元素右边到视窗左边的距离;
rectObject.bottom:元素下边到视窗上边的距离;
rectObject.left:元素左边到视窗左边的距离;
3.思考 :这个属性在ie5就开始支持,能做什么呢? 在淘宝 京东 支付宝 里面可见的效果 。
4.如下效果:
5.Html:
6.逻辑:
(function ($) { function myScroll(element, option) { this.element = element; this.setting = $.extend({}, option, myScroll.defaults) this.init(); } myScroll.defaults = { fixed: {
"position": "fixed",
"top": 0,
"z-index": 1000, }, none: {
"position": "relative",
"z-index": 0
}
} myScroll.prototype = {
init: function () { var target = this.setting.target;
var fixed = this.setting.fixed;
var none = this.setting.none;
var element = this.element; $(window).scroll(function () {
var obj = document.getElementById(target.slice(1)).getBoundingClientRect(); if (obj.top - $(this.element).height() < 0 && obj.bottom - $(this.element).height() > 0) { $(element).css(fixed) $(element).css("width",$(element).parent().width()+"px") } else { $(element).css(none) }
});
}, }
function myPlugin(option) { return this.each(function () {
var that = $(this)
var data = that.data('bs')
var options = typeof option == 'object' && option that.data('bs', new myScroll(this, options)) })
} $.fn.myScroll = myPlugin
$.fn.myScroll.Constructor = myScroll $(window).on('load', function () {
$('[data-type="top"]').each(function () { var type = $(this) myPlugin.call(type, type.data()) })
}) })(jQuery)
作者:原型设计
链接:https://www.jianshu.com/p/824eb6f9dda4
来源:简书
简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。
你了解getBoundingClientRect()?的更多相关文章
- 盒子 offsetLeft、offsetTop、offsetWidth、getBoundingClientRect等属性解释
offsetLeft 获取的是忽略 margin 当前元素距离上一级父节点(有没有设置position,有的话依据父节点,没有的话依据页面最左端这时候不管滚动条移到哪) 当前元素向左的位置 记住它会将 ...
- JavaScript中getBoundingClientRect()方法详解
获取浏览器滚动的高度: scrollTop=document.documentElement.scrollTop || document.body.scrollTop getBoundingClien ...
- js中getBoundingClientRect的作用及兼容方案
js中getBoundingClientRect的作用及兼容方案 1.getBoundingClientRect的作用 getBoundingClientRect用于获取某个html元素相对于视窗的位 ...
- 利用getBoundingClientRect方法实现简洁的sticky组件
补充于2016-03-20: 本文实现有不足,不完美的地方,请在了解本文相关内容后,移步阅读<sticky组件的改进实现>了解更佳的实现. sticky组件,通常应用于导航条或者工具栏,当 ...
- CSSOM之getboundingclientrect和getclientrects
TextRectangle 对于文本对象,W3C提供了一个 TextRectangle 对象,这个对象是对文本区域的一个解释. 对于 i,span,em等display 是inline的标签,在书写文 ...
- getBoundingClientRect在IE9/10里的bug
getBoundingClientRect可以获得页面中某个元素的左,上,右和下分别相对浏览器视窗的位置,最早在IE中实现,后其它浏览器均已实现. 但它在IE9,10中有个bug,当出现垂直滚动条时, ...
- getBoundingClientRect详解
getBoundingClientRect获取的left和top始终是该元素相对于页面原点坐标的位置,当它大于原点坐标则为正数,等于原点坐标为零,小于为负数.
- getBoundingClientRect() 来获取页面元素的位置
getBoundingClientRect() 来获取页面元素的位置 document.documentElement.getBoundingClientRect 下面这是MSDN的解释: Syn ...
- getBoundingClientRect()兼容性处理
getBoundingClientRect() 这个方法返回一个矩形对象,包含四个属性:left.top.right和bottom.分别表示元素各边与页面上边和左边的距离. var box=docum ...
- .getBoundingClientRect()
.getBoundingClientRect() 该方法获得页面中某个元素的左,上,右和下分别相对浏览器视窗的位置,他返回的是一个对象,即Object,该对象有4个属性:top,left,right, ...
随机推荐
- Linux -初体验笔记
课堂笔记 鸟哥Linux私房菜 Linux 版本很多,内核都是一样的 计算机基础知识: 1.完整计算机系统:软件+硬件 硬件:物理装置本身,计算机的物质基础 软件:相对硬件而言, 程序:计算机完成一项 ...
- 机器学习作业(二)逻辑回归——Python(numpy)实现
题目太长啦!文档下载[传送门] 第1题 简述:实现逻辑回归. 此处使用了minimize函数代替Matlab的fminunc函数,参考了该博客[传送门]. import numpy as np imp ...
- 手动运行jar包,指定配置文件
打包程序 mvn package cd target 指定参数运行 java -jar spring-boot-demo-0.0.1-SNAPSHOT.jar --spring.profile.act ...
- 给IDEA添加右键打开功能
添加文件夹右键程序打开 开始运行regedit 找到 HKEY_LOCAL_MACHINE\SOFTWARE\Classes\Directory\shell 1.右键shell目录新建项Idea 2. ...
- 火狐浏览器将网页保存为pdf
目录 火狐打印功能 火狐插件 save as pdf 深夜更博仙女镇 @ 有时候查一些技术博客之类的,当时收藏了,过一阵子再想查看的时候发现404了,所以稳妥的办法还是将把网页保存为pdf. 火狐打印 ...
- Oracle体系结构中基本概念,数据库
在Oracle体系结构中包含了基本概念即Oracle数据库与实例,如果你想要了解Oracle体系结构的话,你就必须要了解这两个基本的概念,以下是文章的具体介绍,望你浏览完以下的内容会有所收获. 数据库 ...
- Java 在程序中输入输出
本周主要学习了Java如何在程序中进行输入和输出,主要分为以下三种: 一.文本界面的输入与输出 1. 使用 javva.util.Scanner 类 2. 使用 in 及 out 二.图形界面的输入与 ...
- C++-POJ2960-S-Nim-[限制型Nim]
每次只能从取集合S中个数的物品,其他和普通Nim游戏相同 预处理出每种物品堆的sg值,然后直接xor一下,xor-sum>0即必胜 #include <set> #include & ...
- IIS支持json、geojson文件
最近在搞asp.net + openlayers. 其中openlayer有个数据源支持 .geojson 数据,但是怎么测试都不能成功.同样的数据拿到php下就能成功显示. 搓. 在网上漫无目的的搜 ...
- Python :元组,不可修改的序列