理解: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
来源:简书
简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。