Web: Common: Added styles and function scrolledTheVerticalAxis

web/ASC.Web.Common/src/components/PageLayout/sub-components/section-body.js

@@ -19,7 +19,7 @@ const commonStyles = css`
 
     @media ${tablet} {
       padding: 16px 0 16px 24px;
-      margin-top: 99px;
+       margin-top: 53px; 
     }
 
     .section-wrapper {

web/ASC.Web.Common/src/components/PageLayout/sub-components/section-header.js

@@ -2,6 +2,7 @@ import React from "react";
 import styled from "styled-components";
 import { utils } from "asc-web-components";
 import isEqual from "lodash/isEqual";
+import classnames from "classnames";
 
 const { tablet } = utils.device;
 
@@ -17,19 +18,25 @@ const StyledSectionHeader = styled.div`
     border-bottom: none;
     height: 44px;
 
-    background-color: #fff; 
-    position: fixed; 
-    top: 56px; 
-    padding-right:100%;
-    transition: top 0.3s;
-    z-index:1;
+ 
   }
+  .section-header--hidden {
+    @media ${tablet} {
+      top: -50px;
+    }
 
+}
   .section-header {
     width: calc(100% - 76px);
 
     @media ${tablet} {
       width: 100%;
+      background-color: #fff; 
+      position: fixed; 
+      top: 56px; 
+      padding-right:100%;
+      transition: top 0.3s;
+      z-index:1;
     }
 
     h1,
@@ -51,16 +58,40 @@ const StyledSectionHeader = styled.div`
 class SectionHeader extends React.Component {
   constructor(props) {
     super(props);
-
+    this.state = {
+      prevScrollpos: window.pageYOffset || document.documentElement.scrollTop,
+      visible: true
+    };
     this.focusRef = React.createRef();
   }
 
+  componentDidMount() {
+ 
+    window.addEventListener("scroll", this.scrolledTheVerticalAxis);
+  }
+
+
+  componentWillUnmount() {
+    window.removeEventListener("scroll", this.scrolledTheVerticalAxis);
+  }
+
+  scrolledTheVerticalAxis = () => {
+    const { prevScrollpos } = this.state;
+
+    const currentScrollPos = window.pageYOffset || document.documentElement.scrollTop;
+    const visible = prevScrollpos > currentScrollPos;
+    
+  
+    this.setState({
+      prevScrollpos: currentScrollPos,
+      visible
+    });
+  };
+
   shouldComponentUpdate(nextProps) {
     return !isEqual(this.props, nextProps);
   }
-  componentDidMount() {
-   
-  }
+
   render() {
 
     //console.log("PageLayout SectionHeader render");
@@ -68,7 +99,9 @@ class SectionHeader extends React.Component {
     const { isArticlePinned, ...rest } = this.props;
     return (
       <StyledSectionHeader isArticlePinned={isArticlePinned}>
-        <div id="scroll" className="section-header" {...rest} />
+        <div id="scroll" className={classnames("section-header" , {
+          "section-header--hidden": !this.state.visible
+        })} {...rest} />
       </StyledSectionHeader>
     );
   }