sticky sidebars

src/components/containers/BlurWrapper/styles.scss

@@ -1,7 +1,4 @@
 .blur {
-  filter: blur(0);
-  transition: filter 0.25s;
-  will-change: filter;
   padding-top: $header_height + 2px;
   display: flex;
   box-sizing: border-box;

src/components/containers/Sticky/index.tsx

@@ -0,0 +1,41 @@
+import React, { FC, ReactComponentElement, DetailsHTMLAttributes, useEffect, useRef } from 'react';
+import styles from './styles.scss';
+import StickySidebar from 'sticky-sidebar';
+import classnames from 'classnames';
+import ResizeSensor from 'resize-sensor';
+
+interface IProps extends DetailsHTMLAttributes<HTMLDivElement> {}
+
+(window as any).StickySidebar = StickySidebar;
+(window as any).ResizeSensor = ResizeSensor;
+
+const Sticky: FC<IProps> = ({ children }) => {
+  const ref = useRef(null);
+  let sb = null;
+
+  useEffect(() => {
+    if (!ref.current) return;
+
+    sb = new StickySidebar(ref.current, {
+      resizeSensor: true,
+      topSpacing: 72,
+      bottomSpacing: 10,
+    });
+
+    return () => sb.destroy();
+  }, [ref.current, children]);
+
+  if (sb) {
+    sb.updateSticky();
+  }
+
+  return (
+    <div className={classnames(styles.wrap, 'sidebar_container')}>
+      <div className="sidebar" ref={ref}>
+        <div className={classnames(styles.sticky, 'sidebar__inner')}>{children}</div>
+      </div>
+    </div>
+  );
+};
+
+export { Sticky };

src/components/containers/Sticky/styles.scss

@@ -0,0 +1,15 @@
+.wrap {
+  height: 100%;
+  width: 100%;
+  position: relative;
+
+  :global(.sidebar) {
+    will-change: min-height;
+  }
+
+  :global(.sidebar__inner) {
+    transform: translate(0, 0); /* For browsers don't support translate3d. */
+    transform: translate3d(0, 0, 0);
+    will-change: position, transform;
+  }
+}