fix(*): set will update only if component is near to or within the viewport

Issue: #20

Author: garthenweb

lib/Sticky.tsx

@@ -62,6 +62,11 @@ class Sticky extends React.PureComponent<IProps, IState> {
     return Boolean(this.props.container);
   };
 
+  isNearToViewport = (rect: IRect): boolean => {
+    const padding = 300;
+    return rect.top - padding < 0 && rect.bottom + padding > 0;
+  };
+
   isSticky = (rect: IRect, containerRect: IRect) => {
     if (!this.hasContainer()) {
       return containerRect.top <= this.offsetTop;
@@ -139,7 +144,7 @@ class Sticky extends React.PureComponent<IProps, IState> {
 
     if (!this.props.disableHardwareAcceleration) {
       styles.transform = `translateZ(0)`;
-      styles.willChange = 'position, top';
+      styles.willChange = this.isNearToViewport(rect) ? 'position, top' : null;
     }
 
     return styles;

lib/StickyScrollUp.tsx

@@ -114,14 +114,21 @@ class StickyScrollUp extends React.PureComponent<IProps, IState> {
     }
   }
 
+  isNearToViewport = (rect: IRect): boolean => {
+    const padding = 300;
+    return rect.top - padding < 0;
+  };
+
   getStickyStyles(stickyRect: IRect, scroll: IScroll) {
     const styles = calcPositionStyles(stickyRect, scroll, {
       offsetTop: this.props.defaultOffsetTop,
     });
 
     if (!this.props.disableHardwareAcceleration) {
       styles.transform = `translateZ(0)`;
-      styles.willChange = 'position, top';
+      styles.willChange = this.isNearToViewport(stickyRect)
+        ? 'position, top'
+        : null;
     }
 
     return styles;