iview/viewUI库组件封装学习——Affix

基本逻辑：该UI组件是在满足特定条件下触发fixed效果，和css3中得sticky很相近。首先此组件涉及三个主要参数，分别是滚动条的滚动距离scrollTop（window.scrollTop）、组件元素的BoundingClientRect.top 即该组件距离浏览器可视区域的距离，还有组件接收用户参数offsetTop的值，如何保证元素距离可视区顶部为offsetTop的值时将元素固定？BoundingClientRect.top的初始值即scrollTop为0时，当我们滚动滚动条时BoundingClientRect.top减小到scrollTop时触发固定事件，即触发事件的条件为BoundingClientRect.top的初始值 — scrollTop （滚动条滚动的距离）< offsetTop（用户设定的边界值）触发固定条件 即组件的class = ivu-affix 为true，同时触发事件函数on-change，bottom和left同理，（有点凌乱，最后附上源码参考理解）
总结： 固定元素其实很简单，但通过复杂js实现此功能实现了2点功能：1、可以设定触发条件瞬间的回调函数（on-change）2、同时用position fixed 完成了position sticky效果，增加了兼容性（CSS3才开始支持position: sticky）
源码中on和off是公共类的事件绑定和解绑的兼容性写法，可以当作addEventListener函数理解。

<template>
    <div>
        <div ref="point" :class="classes" :style="styles">
            <slot></slot>
        </div>
        <div v-show="slot" :style="slotStyle"></div>
    </div>
</template>
<script>
    import {
    on, off } from '../../utils/dom';
    const prefixCls = 'ivu-affix';

    function getScroll(target, top) {
   
        const prop = top ? 'pageYOffset' : 'pageXOffset';
        const method = top ? 'scrollTop' : 'scrollLeft';

        let ret = target[prop];

        if (typeof ret !== 'number') {
   
            ret = window.document.documentElement[method];
        }

        return ret;
    }

    function getOffset(element) {
   
        const rect = element.getBoundingClientRect();

        const scrollTop = getScroll(window, true);
        const scrollLeft = getScroll(window)