sticky sidebars

package.json

@@ -99,6 +99,7 @@
     "redux-persist": "^5.10.0",
     "redux-saga": "^1.1.1",
     "reduxsauce": "^1.0.0",
+    "resize-sensor": "^0.0.6",
     "sass-loader": "^7.3.1",
     "sass-resources-loader": "^2.0.0",
     "scrypt": "^6.0.3",

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;
+  }
+}

src/containers/node/NodeLayout/index.tsx

@@ -20,6 +20,7 @@ import pick from 'ramda/es/pick';
 import { NodeRelatedPlaceholder } from '~/components/node/NodeRelated/placeholder';
 import { NodeDeletedBadge } from '~/components/node/NodeDeletedBadge';
 import { NodeCommentForm } from '~/components/node/NodeCommentForm';
+import { Sticky } from '~/components/containers/Sticky';
 
 const mapStateToProps = state => ({
   node: selectNode(state),
@@ -158,26 +159,28 @@ const NodeLayoutUnconnected: FC<IProps> = memo(
                 </Group>
 
                 <div className={styles.panel}>
-                  <Group style={{ flex: 1, minWidth: 0 }}>
-                    {!is_loading && (
-                      <NodeTags is_editable={is_user} tags={node.tags} onChange={onTagsChange} />
-                    )}
+                  <Sticky>
+                    <Group style={{ flex: 1, minWidth: 0 }}>
+                      {!is_loading && (
+                        <NodeTags is_editable={is_user} tags={node.tags} onChange={onTagsChange} />
+                      )}
 
-                    {is_loading && <NodeRelatedPlaceholder />}
+                      {is_loading && <NodeRelatedPlaceholder />}
 
-                    {!is_loading &&
-                      related &&
-                      related.albums &&
-                      Object.keys(related.albums)
-                        .filter(album => related.albums[album].length > 0)
-                        .map(album => (
-                          <NodeRelated title={album} items={related.albums[album]} key={album} />
-                        ))}
+                      {!is_loading &&
+                        related &&
+                        related.albums &&
+                        Object.keys(related.albums)
+                          .filter(album => related.albums[album].length > 0)
+                          .map(album => (
+                            <NodeRelated title={album} items={related.albums[album]} key={album} />
+                          ))}
 
-                    {!is_loading && related && related.similar && related.similar.length > 0 && (
-                      <NodeRelated title="ПОХОЖИЕ" items={related.similar} />
-                    )}
-                  </Group>
+                      {!is_loading && related && related.similar && related.similar.length > 0 && (
+                        <NodeRelated title="ПОХОЖИЕ" items={related.similar} />
+                      )}
+                    </Group>
+                  </Sticky>
                 </div>
               </Group>
             </Padder>
@@ -188,9 +191,6 @@ const NodeLayoutUnconnected: FC<IProps> = memo(
   }
 );
 
-const NodeLayout = connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(NodeLayoutUnconnected);
+const NodeLayout = connect(mapStateToProps, mapDispatchToProps)(NodeLayoutUnconnected);
 
 export { NodeLayout, NodeLayoutUnconnected };

yarn.lock

@@ -8510,6 +8510,11 @@ requires-port@^1.0.0:
   resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff"
   integrity sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=
 
+resize-sensor@^0.0.6:
+  version "0.0.6"
+  resolved "https://registry.yarnpkg.com/resize-sensor/-/resize-sensor-0.0.6.tgz#75147dcb273de6832760e461d2e28de6dcf88c45"
+  integrity sha512-e+3wwdki9elemYP6AnyG2BK9/Gd7ak46wZN+Z62WwmWfhn2La1XV2rPRRIcar+PhRhfiQDXi29TapGMTIbI3Pg==
+
 resolve-cwd@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/resolve-cwd/-/resolve-cwd-2.0.0.tgz#00a9f7387556e27038eae232caa372a6a59b665a"