Replace Affix with position: sticky, remove dependencies (#325)

Author: PavelVanecek

package-lock.json

@@ -48,16 +48,13 @@
   },
   "dependencies": {
     "@monaco-editor/react": "^4.7.0",
-    "classnames": "^2.5.1",
     "cross-fetch": "^3.1.2",
     "d3-scale": "^3.2.3",
     "d3-scale-chromatic": "^1.3.3",
     "d3-shape": "^2.0.0",
     "highlight.js": "~9.8.0",
     "lodash": "^4.17.20",
     "monaco-editor": "^0.52.2",
-    "oui-dom-events": "^0.2.2",
-    "oui-dom-utils": "^0.3.8",
     "prop-types": "^15.8.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",

package.json

@@ -3,7 +3,6 @@ import { Link } from 'react-router-dom';
 import { RouteComponentProps, withRouter } from 'react-router';
 import Helmet from 'react-helmet';
 import { getLocaleType, localeGet } from '../utils/LocaleUtils.ts';
-import Affix from '../components/Affix';
 import '../styles/app.scss';
 
 const modules = ['guide', 'api', 'examples', 'blog', 'storybook'];
@@ -51,39 +50,37 @@ class Frame extends Component<FrameProps> {
     return (
       <div className="container">
         <Helmet titleTemplate="%s | Recharts" />
-        <Affix>
-          <header>
-            <div className="header-wrapper">
-              <h1 className="logo">
-                <Link className="nav-logo" to={`/${locale}`}>
-                  &lt;Recharts /&gt;
-                </Link>
-              </h1>
-              <nav>
-                <ul className="nav" id="nav">
-                  {modules.map((entry, index) => (
-                    <li key={`item-${index}`}>
-                      <Link className={`nav-link ${entry === page ? 'active' : ''}`} to={`/${locale}/${entry}`}>
-                        {localeGet(locale, 'frame', entry)}
-                      </Link>
-                    </li>
-                  ))}
-                  <li className="github-wrapper">
-                    <a
-                      href="https://github.com/recharts/recharts"
-                      target="_blank"
-                      className="nav-github"
-                      rel="noreferrer"
-                    >
-                      GitHub
-                    </a>
+        <header>
+          <div className="header-wrapper">
+            <h1 className="logo">
+              <Link className="nav-logo" to={`/${locale}`}>
+                &lt;Recharts /&gt;
+              </Link>
+            </h1>
+            <nav>
+              <ul className="nav" id="nav">
+                {modules.map((entry, index) => (
+                  <li key={`item-${index}`}>
+                    <Link className={`nav-link ${entry === page ? 'active' : ''}`} to={`/${locale}/${entry}`}>
+                      {localeGet(locale, 'frame', entry)}
+                    </Link>
                   </li>
-                  <li className="language-switch-wrapper">{this.renderLocaleSwitch(locale)}</li>
-                </ul>
-              </nav>
-            </div>
-          </header>
-        </Affix>
+                ))}
+                <li className="github-wrapper">
+                  <a
+                    href="https://github.com/recharts/recharts"
+                    target="_blank"
+                    className="nav-github"
+                    rel="noreferrer"
+                  >
+                    GitHub
+                  </a>
+                </li>
+                <li className="language-switch-wrapper">{this.renderLocaleSwitch(locale)}</li>
+              </ul>
+            </nav>
+          </div>
+        </header>
         {children}
         <footer>
           <p>

src/components/Affix.scss

@@ -5,6 +5,9 @@ header {
   width: 100%;
   background-color: #fcfcfc;
   box-shadow: 0 0 4px rgba(0,0,0,0.25);
+  position: sticky;
+  top: 0;
+  z-index: 1000;
 
   .header-wrapper {
     min-width: 1200px;