Finish sticky digipub header [PUB-200]

art-institute-of-chicago · Aug 21, 2024 · bbd9f59 · bbd9f59
1 parent 14cd908
commit bbd9f59
Show file tree

Hide file tree

Showing 2 changed files with 94 additions and 19 deletions.
diff --git a/frontend/js/behaviors/core/stickyDigitalPublicationHeader.js b/frontend/js/behaviors/core/stickyDigitalPublicationHeader.js
@@ -1,7 +1,8 @@
 const stickyDigitalPublicationHeader = function(container) {
-  const HEADER_HEIGHT = 180; // in px
-  const HEADER_STICKY = 's-sticky-digital-publication-header';
-  const HEADER_UNSTICKY = 's-unsticky-digital-publication-header';
+  const MIN_CONTAINER_HEIGHT = 180; // in px
+  const HEADER_IS_STICKY = 's-sticky-digital-publication-header';
+  const HEADER_IS_SHRINKING = 's-shrinking-digital-publication-header';
+  const HEADER_AT_MIN_HEIGHT = 's-min-height-digital-publication-header';
 
   const getOffsetTop = element => {
     let offsetTop = 0;
@@ -14,7 +15,7 @@ const stickyDigitalPublicationHeader = function(container) {
 
   const setState = targetState => {
     let classList = document.documentElement.classList;
-    let possibleStates = [HEADER_STICKY, HEADER_UNSTICKY];
+    let possibleStates = [HEADER_IS_STICKY,  HEADER_IS_SHRINKING, HEADER_AT_MIN_HEIGHT];
     possibleStates.forEach(state => {
       if (state !== targetState && classList.contains(state)) {
         classList.remove(state);
@@ -29,32 +30,51 @@ const stickyDigitalPublicationHeader = function(container) {
   };
 
   const resetScroll = () => {
-    if (currentState == HEADER_STICKY) {
+    if (currentState == HEADER_IS_STICKY) {
       container.scrollTo(0, 0);
     }
   };
 
   let currentState;
-  let containerTop = getOffsetTop(container) + document.body.scrollTop;
+  let containerOffsetHeight;
+  let scrollTop;
 
   function handleScroll() {
     window.requestAnimationFrame(update);
   }
 
+  function handleResize() {
+    containerOffsetHeight = getOffsetTop(container) + container.offsetHeight;
+    handleScroll();
+  }
+
   function update() {
-    let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
-    let containerHeight = container.offsetHeight;
+    let navContainerHeight = document.querySelector('.g-header').clientHeight;
+    scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
 
-    if (scrollTop < (containerTop + containerHeight - HEADER_HEIGHT)) {
-      setState(HEADER_UNSTICKY);
+    if (scrollTop < navContainerHeight) {
+      // If user has not scrolled past nav container to the digital publication
+      // header, unset state
+      setState(null);
+    } else if (scrollTop < (containerOffsetHeight - MIN_CONTAINER_HEIGHT)) {
+      // If user has not scrolled to the container's minimum height, header is
+      // "shrinking down to the minimum size"
+      setState(HEADER_IS_SHRINKING);
+    } else if (scrollTop < containerOffsetHeight) {
+      // If user has not scrolled to the container offset height, display the
+      // header at its mininum height
+      setState(HEADER_AT_MIN_HEIGHT);
     } else {
-      setState(HEADER_STICKY);
+      // As user continues to scroll down the page, keep the header stuck to the
+      // top of the page
+      setState(HEADER_IS_STICKY);
     }
   }
 
   function _init() {
+    window.addEventListener('resized', handleResize);
     window.addEventListener('scroll', handleScroll);
-    setState(HEADER_STICKY);
+    handleResize();
     resetScroll();
     handleScroll();
   }

diff --git a/frontend/scss/molecules/_m-article-header.scss b/frontend/scss/molecules/_m-article-header.scss
@@ -1099,6 +1099,8 @@
   }
 
   .title {
+    font-size: 28px;
+    line-height: 34px;
     margin-top: 26px;
   }
 
@@ -1135,14 +1137,61 @@
       margin-top: 35px;
     }
   }
+  @include breakpoint('medium-') {
+    .s-sticky-digital-publication-header &~.m-sidebar-toggle {
+      position: fixed;
+      top: 0;
+      width: 100vw;
+      z-index: map-get($zindexs, 'header');
+
+      &::before {
+        left: 0;
+        width: 150vw;
+      }
+    }
+  }
 
   @include breakpoint('large+') {
     flex-flow: row-reverse nowrap;
 
+    .title {
+      opacity: 1;
+    }
+
+    .subtitle {
+      opacity: 1;
+    }
+
+    .s-shrinking-digital-publication-header.s-scroll-direction-down & {
+      .title {
+        opacity: 0;
+        transition: opacity 1s;
+      }
+
+      .subtitle {
+        opacity: 0;
+        transition: opacity 1s;
+      }
+    }
+
+    .s-min-height-digital-publication-header & {
+      .title {
+        opacity: 1;
+        transition: opacity 2s;
+      }
+    }
+
+    .s-min-height-digital-publication-header &,
     .s-sticky-digital-publication-header & {
       position: fixed;
       top: 0;
       width: 100%;
+      z-index: map-get($zindexs, 'header');
+
+      .title {
+        margin-bottom: auto;
+        margin-top: auto;
+      }
 
       .subtitle {
         display: none;
@@ -1176,10 +1225,13 @@
       z-index: 1;
     }
     .m-article-header__text::before {
-      left: -100%;
+      left: -50%;
       margin-left: 0;
       max-width: colspan(14, xlarge);
     }
+    .m-article-header__img {
+      flex: 0 0 auto;
+    }
   }
 }
 
@@ -1600,11 +1652,14 @@ a.m-article-header__img-credit {
   outline: 1px solid $color__black--54;
 }
 
-.m-article-header__spacer {
-  display: none;
-  .s-sticky-digital-publication-header:not(.s-scroll-direction-up) & {
-    display: block;
-    height: 75vh;
-    width: 100vw;
+@include breakpoint('large+') {
+  .m-article-header__spacer {
+    display: none;
+    .s-min-height-digital-publication-header.s-scroll-direction-down &,
+    .s-sticky-digital-publication-header.s-scroll-direction-down & {
+      display: block;
+      height: 75vh;
+      width: 100vw;
+    }
   }
 }