Adding sticky header js and styling

base.scss

@@ -13,7 +13,8 @@
 @import "./src/stories/Library/Arrows/arrows";
 @import "./src/stories/Library/Buttons/button/buttons";
 @import "./src/stories/Library/Buttons/button-ui/buttons-ui";
-@import "./src/stories/Library/spacing/spacing";
+@import "./src/stories/Library/layout/spacing";
+@import "./src/stories/Library/layout/z-index";
 @import "./src/stories/Library/tag/tag";
 @import "./src/stories/Library/logo/logo";
 @import "./src/stories/Library/pagefold/pagefold";

src/stories/Blocks/autosuggest/autosuggest.scss

@@ -5,7 +5,7 @@
   left: 0;
   right: 0;
   top: calc(100% + 1px);
-  z-index: 1;
+  z-index: $z-5;
   display: flex;
   flex-wrap: wrap;
   justify-content: center;

src/stories/Blocks/header/Header.stories.tsx

@@ -1,4 +1,4 @@
-import { ComponentMeta } from "@storybook/react";
+import { ComponentMeta, ComponentStory } from "@storybook/react";
 import { withDesign } from "storybook-addon-designs";
 
 import { Header as HeaderComp, HeaderProps } from "./Header";
@@ -27,6 +27,36 @@ export default {
       url: "https://www.figma.com/file/Zx9GrkFA3l4ISvyZD2q0Qi/Designsystem?node-id=264%3A2160",
     },
   },
-} as ComponentMeta<typeof Header>;
+} as ComponentMeta<typeof HeaderComp>;
 
-export const Header = (props: HeaderProps) => <HeaderComp {...props} />;
+export const Header: ComponentStory<typeof HeaderComp> = (args) => (
+  <HeaderComp {...args} />
+);
+
+export const StickyHeaderWithContent = (props: HeaderProps) => (
+  <div>
+    <HeaderComp {...props} />
+    <main className="p-16">
+      <p className="my-16">
+        <strong>
+          Because of limitations regarding determing y position and scroll in an
+          iframe open the frame to see the sticky header in action
+        </strong>
+      </p>
+      {[...Array(50)].map(() => (
+        <>
+          <p>
+            Morbi in sem quis dui placerat ornare. Pellentesque odio nisi,
+            euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras
+            consequat.
+          </p>
+          <p>
+            Praesent dapibus, neque id cursus faucibus, tortor neque egestas
+            augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam
+            dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.
+          </p>
+        </>
+      ))}
+    </main>
+  </div>
+);

src/stories/Blocks/header/Header.tsx

@@ -36,11 +36,12 @@ export const Header = (props: HeaderProps) => {
   const { signedIn, haveNotification, username, inputPlaceholder } = props;
 
   useEffect(() => {
-    require("./initheader");
+    require("./header-toggle");
+    require("./header-sticky");
   }, []);
 
   return (
-    <div>
+    <>
       <header className="header">
         <div className="header__logo-desktop">
           <a className="header__logo-desktop-link" href="/">
@@ -161,7 +162,7 @@ export const Header = (props: HeaderProps) => {
         </div>
         <div className="header__overlay-backdrop" />
       </div>
-    </div>
+    </>
   );
 };
 

src/stories/Blocks/header/header-sticky.js

@@ -0,0 +1,41 @@
+window.addEventListener("DOMContentLoaded", () => {
+  let scrollDirection = "up";
+  let lastScrollY = window.scrollY;
+  const headerOffsetTop = document.querySelector("header").offsetTop;
+
+  const updateStickyHeader = ({
+    // If you want to set a custom starting position for the header.
+    initialHeaderYposition = null,
+    // Tweak the header position when it's down by this amount.
+    headerDownTopPositionOffset = 5,
+    // Wait this many pixels before showing/hiding the header.
+    waitPx = 5,
+  }) => {
+    // Get the starting position of the header
+    const headerYStartPosition = initialHeaderYposition ?? headerOffsetTop;
+
+    const { scrollY } = window;
+    // Detect if we are going up or down.
+    const direction = scrollY > lastScrollY ? "down" : "up";
+    if (
+      direction !== scrollDirection &&
+      Math.abs(scrollY - lastScrollY) > waitPx
+    ) {
+      scrollDirection = direction;
+    }
+    lastScrollY = scrollY > 0 ? scrollY : 0;
+
+    // Control header direction class.
+    if (scrollDirection === "down") {
+      const headerHeight = document.querySelector("header").offsetHeight;
+      const headerDownTopPosition = headerHeight + headerDownTopPositionOffset;
+      document.querySelector(
+        "header"
+      ).style.top = `-${headerDownTopPosition}px`;
+    } else {
+      document.querySelector("header").style.top = `${headerYStartPosition}px`;
+    }
+  };
+
+  window.addEventListener("scroll", updateStickyHeader);
+});

src/stories/Blocks/header/header.scss

@@ -4,6 +4,11 @@
   display: grid;
   grid-template-columns: 1fr;
   background-color: $c-global-primary;
+  position: sticky;
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 500ms;
+  z-index: $z-20;
 
   @include breakpoint-s {
     grid-template-columns: 1fr 105px;
@@ -203,14 +208,16 @@
 }
 
 // The kebab casing conflicts with our naming convention.
-#header__overlay.visible { /* stylelint-disable-line */
+#header__overlay.visible {
+  /* stylelint-disable-line */
   display: grid;
 }
 
 // The kebab casing conflicts with our naming convention.
-#header__overlay { /* stylelint-disable-line */
+#header__overlay {
+  /* stylelint-disable-line */
   display: none;
-  z-index: 5;
+  z-index: $z-20;
   position: fixed;
   top: 0;
   left: 0;
@@ -242,7 +249,8 @@
 }
 
 // The kebab casing conflicts with our naming convention.
-#header__menu--close { /* stylelint-disable-line */
+#header__menu--close {
+  /* stylelint-disable-line */
   position: fixed;
   padding: 30px;
 }

src/stories/Library/Lists/list-reservation/list-reservation.scss

@@ -185,15 +185,15 @@ $list-reservation-space-desktop: 24px;
 
     content: " ";
     transform: translateY(8px) scale(0.95);
-    z-index: -1;
+    z-index: $-z-5;
   }
 
   &::before {
     @extend %list-stacked;
 
     content: " ";
     transform: translateY(16px) scale(0.9);
-    z-index: -2;
+    z-index: $-z-10;
   }
 
   &:hover {

src/stories/Library/Modals/modal-details/modal-details.scss

@@ -123,7 +123,7 @@ $MODAL_DETAILS_CONTAINER_WIDTH: 1000px;
   right: 0;
   padding: 34px;
   transition: 0.3s;
-  z-index: 2;
+  z-index: $z-10;
 
   &:hover {
     transform: rotateZ(90deg);

src/stories/Library/Modals/modal.scss

@@ -71,7 +71,7 @@
   width: 100%;
   height: 100%;
   position: fixed;
-  z-index: 5;
+  z-index: $z-20;
   top: 0;
   left: 0;
   background-color: hsla(0, 0%, 15%, 0.5);
@@ -87,7 +87,7 @@
   right: 0;
   padding: 22.5px;
   transition: 0.3s;
-  z-index: 2;
+  z-index: $z-15;
 
   &.modal-btn-close--offset {
     @include breakpoint-s {

src/stories/Library/layout/z-index.scss

@@ -0,0 +1,7 @@
+$-z-10: -10;
+$-z-5: -5;
+$z-5: 5;
+$z-10: 10;
+$z-15: 15;
+$z-20: 20;
+$z-25: 25;