理解：getBoundingClientRect用于获取某个元素相对于视窗的位置集合。集合中有top, right, bottom, left等属性。
1.语法：这个方法没有参数。
rectObject = object.getBoundingClientRect();
2.返回值类型：
rectObject.top：元素上边到视窗上边的距离;
rectObject.right：元素右边到视窗左边的距离;
rectObject.bottom：元素下边到视窗上边的距离;
rectObject.left：元素左边到视窗左边的距离;
262132219001037.jpg
3.思考 ：这个属性在ie5就开始支持，能做什么呢？ 在淘宝 京东 支付宝 里面可见的效果 。
4.如下效果：
动画.gif
5.Html:
image.png
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)
