You understand getBoundingClientRect ()?

Understand: getBoundingClientRect used to obtain an element with respect to the collection window. There set top, right, bottom, left and other attributes.

1. Grammar: This method has no parameters.

rectObject = object.getBoundingClientRect();

2. Return Value Type:
　rectObject.top: distance to the window element to the top of the upper side;

　rectObject.right: the right distance from the window to the left of the element;

　rectObject.bottom: element distance below the top of the window;

　rectObject.left: distance to the left element in the left side of the window;

  

3. Thoughts: This property has supported the ie5, what can you do? Alipay inside visible effect in Taobao Jingdong.

4. the following effects:

 

5.Html:

 

6. Logic:

(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)

Author: prototyping
link: https: //www.jianshu.com/p/824eb6f9dda4
Source: Jane book
Jane book copyright reserved by the authors, are reproduced in any form, please contact the author to obtain authorization and indicate the source.