use babel-preset-env

src/directive/sticky.js

@@ -1,99 +1,91 @@
-(function() {
-  const vueSticky = {};
-  let listenAction;
-  vueSticky.install = Vue => {
-    Vue.directive('sticky', {
-      inserted(el, binding) {
-        const params = binding.value || {},
-          stickyTop = params.stickyTop || 0,
-          zIndex = params.zIndex || 1000,
-          elStyle = el.style;
+const vueSticky = {};
+let listenAction;
+vueSticky.install = Vue => {
+  Vue.directive('sticky', {
+    inserted(el, binding) {
+      const params = binding.value || {},
+        stickyTop = params.stickyTop || 0,
+        zIndex = params.zIndex || 1000,
+        elStyle = el.style;
 
-        elStyle.position = '-webkit-sticky';
-        elStyle.position = 'sticky';
+      elStyle.position = '-webkit-sticky';
+      elStyle.position = 'sticky';
         // if the browser support css sticky（Currently Safari, Firefox and Chrome Canary）
         // if (~elStyle.position.indexOf('sticky')) {
         //     elStyle.top = `${stickyTop}px`;
         //     elStyle.zIndex = zIndex;
         //     return
         // }
-        const elHeight = el.getBoundingClientRect().height;
-        const elWidth = el.getBoundingClientRect().width;
-        elStyle.cssText = `top: ${stickyTop}px; z-index: ${zIndex}`;
+      const elHeight = el.getBoundingClientRect().height;
+      const elWidth = el.getBoundingClientRect().width;
+      elStyle.cssText = `top: ${stickyTop}px; z-index: ${zIndex}`;
 
-        const parentElm = el.parentNode || document.documentElement;
-        const placeholder = document.createElement('div');
+      const parentElm = el.parentNode || document.documentElement;
+      const placeholder = document.createElement('div');
+      placeholder.style.display = 'none';
+      placeholder.style.width = `${elWidth}px`;
+      placeholder.style.height = `${elHeight}px`;
+      parentElm.insertBefore(placeholder, el)
+
+      let active = false;
+
+      const 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;
+      };
+
+      const sticky = () => {
+        if (active) {
+          return
+        }
+        if (!elStyle.height) {
+          elStyle.height = `${el.offsetHeight}px`
+        }
+
+        elStyle.position = 'fixed';
+        elStyle.width = `${elWidth}px`;
+        placeholder.style.display = 'inline-block';
+        active = true
+      };
+
+      const reset = () => {
+        if (!active) {
+          return
+        }
+
+        elStyle.position = '';
         placeholder.style.display = 'none';
-        placeholder.style.width = `${elWidth}px`;
-        placeholder.style.height = `${elHeight}px`;
-        parentElm.insertBefore(placeholder, el)
+        active = false;
+      };
 
-        let active = false;
-
-        const 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];
+      const check = () => {
+        const scrollTop = getScroll(window, true);
+        const offsetTop = el.getBoundingClientRect().top;
+        if (offsetTop < stickyTop) {
+          sticky();
+        } else {
+          if (scrollTop < elHeight + stickyTop) {
+            reset()
           }
-          return ret;
-        };
+        }
+      };
+      listenAction = () => {
+        check()
+      };
 
-        const sticky = () => {
-          if (active) {
-            return
-          }
-          if (!elStyle.height) {
-            elStyle.height = `${el.offsetHeight}px`
-          }
+      window.addEventListener('scroll', listenAction)
+    },
 
-          elStyle.position = 'fixed';
-          elStyle.width = `${elWidth}px`;
-          placeholder.style.display = 'inline-block';
-          active = true
-        };
+    unbind() {
+      window.removeEventListener('scroll', listenAction)
+    }
+  })
+};
 
-        const reset = () => {
-          if (!active) {
-            return
-          }
-
-          elStyle.position = '';
-          placeholder.style.display = 'none';
-          active = false;
-        };
-
-        const check = () => {
-          const scrollTop = getScroll(window, true);
-          const offsetTop = el.getBoundingClientRect().top;
-          if (offsetTop < stickyTop) {
-            sticky();
-          } else {
-            if (scrollTop < elHeight + stickyTop) {
-              reset()
-            }
-          }
-        };
-        listenAction = () => {
-          check()
-        };
-
-        window.addEventListener('scroll', listenAction)
-      },
-
-      unbind() {
-        window.removeEventListener('scroll', listenAction)
-      }
-    })
-  };
-  if (typeof exports == 'object') {
-    module.exports = vueSticky
-  } else if (typeof define == 'function' && define.amd) {
-    define([], () => vueSticky)
-  } else if (window.Vue) {
-    window.vueSticky = vueSticky;
-    Vue.use(vueSticky)
-  }
-}());
+export default vueSticky