set fadeInUp animation to FixedControls

src/client/js/components/FixedControls.jsx

@@ -7,9 +7,13 @@ import { withUnstatedContainers } from './UnstatedUtils';
 const FixedControls = (props) => {
   const { navigationContainer } = props;
 
+  const { showFav } = navigationContainer.state;
+
+  const showClasses = showFav ? ['animated fadeInUp faster'] : ['invisible'];
+
   return (
-    <div className="grw-fixed-controls-container d-none d-md-block animated fadeInUp faster">
-      <div className="rounded-circle position-absolute" style={{ bottom: '2.3rem', right: '3rem' }}>
+    <div className="grw-fixed-controls d-none d-md-block">
+      <div className={`rounded-circle position-absolute ${showClasses.join(' ')}`} style={{ bottom: '2.3rem', right: '3rem' }}>
         <button
           type="button"
           className="btn btn-lg btn-create-page btn-primary rounded-circle waves-effect waves-light"
@@ -18,7 +22,7 @@ const FixedControls = (props) => {
           <i className="icon-pencil"></i>
         </button>
       </div>
-      <div className="rounded-circle position-absolute" style={{ bottom: 0, right: 0 }}>
+      <div className={`rounded-circle position-absolute ${showClasses.join(' ')}`} style={{ bottom: 0, right: 0 }}>
         <button type="button" className="btn btn-light btn-scroll-to-top rounded-circle" onClick={() => navigationContainer.smoothScrollIntoView()}>
           <i className="icon-control-start"></i>
         </button>

src/client/js/services/NavigationContainer.js

@@ -5,7 +5,8 @@ import { Container } from 'unstated';
  * @extends {Container} unstated Container
  */
 
-const scrollThresForThrottling = 100;
+const SCROLL_THRES_FAV = 60;
+const SCROLL_THRES_SKIP = 200;
 
 export default class NavigationContainer extends Container {
 
@@ -30,6 +31,7 @@ export default class NavigationContainer extends Container {
       sidebarContentsId: 'recent',
 
       isScrollTop: true,
+      showFav: false,
 
       isPageCreateModalShown: false,
     };
@@ -93,12 +95,13 @@ export default class NavigationContainer extends Container {
       const currentYOffset = window.pageYOffset;
 
       // original throttling
-      if (scrollThresForThrottling < currentYOffset) {
+      if (SCROLL_THRES_SKIP < currentYOffset) {
         return;
       }
 
       this.setState({
         isScrollTop: currentYOffset === 0,
+        showFav: SCROLL_THRES_FAV < currentYOffset,
       });
     });
   }

src/client/styles/scss/_layout.scss

@@ -56,7 +56,7 @@ body {
   }
 }
 
-.grw-fixed-controls-container {
+.grw-fixed-controls {
   position: fixed;
   right: 1.5rem;
   bottom: 3rem;