Ch/qa scrolling

packages/microcosm-www-next/package.json

@@ -8,7 +8,7 @@
     "gatsby-link": "^1.6.22",
     "gatsby-plugin-react-helmet": "^1.0.8",
     "gatsby-plugin-sass": "^1.0.12",
-    "react-intersection-observer": "^2.0.3"
+    "intersection-observer": "^0.5.0"
   },
   "keywords": [
     "gatsby"

packages/microcosm-www-next/src/layouts/index.js

@@ -4,6 +4,7 @@ import Link from 'gatsby-link'
 import Helmet from 'react-helmet'
 import VigetLogo from '../components/viget-logo'
 
+import 'intersection-observer'
 import '../stylesheets/app.scss'
 
 const Navigation = () => (

packages/microcosm-www-next/src/pages/index.js

@@ -12,6 +12,10 @@ export default class IndexPage extends React.Component {
     }
   }
 
+  componentWillMount() {
+    this.sections = this.createSectionsArray()
+  }
+
   componentDidMount() {
     this.setVars()
     this.beginObserve()
@@ -27,6 +31,16 @@ export default class IndexPage extends React.Component {
     }
   }
 
+  createSectionsArray() {
+    let arr = []
+
+    for (let i = 0; i < this.state.numSections; i++) {
+      arr.push(i + 1)
+    }
+
+    return arr
+  }
+
   beginObserve() {
     //create new Observer instance
     let observer = new IntersectionObserver(
@@ -35,7 +49,9 @@ export default class IndexPage extends React.Component {
     )
 
     //start observing each graphic
-    this.graphics.forEach(graphic => observer.observe(graphic))
+    for (let i = 0; i < this.graphics.length; i++) {
+      observer.observe(this.graphics[i])
+    }
   }
 
   onIntersection = observed => {
@@ -90,7 +106,9 @@ export default class IndexPage extends React.Component {
 
             <div className="toggle-container">
               <h3
-                className={'section__content__subheading -bottom' + browserClass}
+                className={
+                  'section__content__subheading -bottom' + browserClass
+                }
               >
                 Meanwhile, in
               </h3>
@@ -102,11 +120,9 @@ export default class IndexPage extends React.Component {
           </div>
 
           <div className="section__graphic">
-            {Array(this.state.numSections)
-              .fill()
-              .map((el, i) => (
-                <Graphic key={i} section={i + 1} graphicUrl={graphicUrl} />
-              ))}
+            {this.sections.map(el => (
+              <Graphic key={el} section={el} graphicUrl={graphicUrl} />
+            ))}
           </div>
         </section>
       </div>

packages/microcosm-www-next/src/stylesheets/structure/_body.scss

@@ -3,6 +3,7 @@ $split-bg-height-desktop: 291px;
 
 body {
   background-color: color(bg-1-bottom);
+  position: relative;
   transition: transition(background-color);
 
   &::before {  //top of half split bg

packages/microcosm-www-next/src/stylesheets/structure/_footer.scss

@@ -18,6 +18,10 @@ $cta-bottom-padding: 6px;
 
   @include breakpoint(large-desktop-up) {
     position: fixed;
+
+    @media (max-height: 900px) { // if browser is shorter than 900px, don't fix footer to bottom
+      position: absolute;
+    }
   }
 
   .wrapper {

packages/microcosm-www-next/src/stylesheets/structure/_section.scss

@@ -6,32 +6,49 @@ $section-top-padding-desktop: $nav-height + 110px;
 
   @include breakpoint(large-desktop-up) {
     display: flex;
-    justify-content: space-between;
     padding-top: $section-top-padding-desktop;
+
+    @supports (position: sticky) or (position: -webkit-sticky) {
+      justify-content: space-between;
+    }
   }
 }
 
 // CONTENT
 
 .section__content {
   height: 100%;
-  position: sticky;
-  top: $section-top-padding-mobile;
+  padding-right: 20px;
+  position: fixed;
+  width: 100%;
 
   @include breakpoint(large-desktop-up) {
-    flex-basis: 45%;
-    order: 2;
-    top: $section-top-padding-desktop;
+    right: 2%;
+    width: 45%;
+  }
+
+  @supports (position: sticky) or (position: -webkit-sticky) {
+    padding-right: 0;
+    position: -webkit-sticky;
+    position: sticky;
+    top: $section-top-padding-mobile;
+
+    @include breakpoint(large-desktop-up) {
+      order: 2;
+      top: $section-top-padding-desktop;
+    }
   }
 }
 
+
 // CONTENT - containers
 
 .text-container {
-  margin: 0 auto rem(50);
+  margin-bottom: rem(50);
   max-width: 550px;
 
   @include breakpoint(medium-desktop-down) {
+    margin: 0 auto rem(50);
     padding-left: rem(40);
   }
 }
@@ -151,9 +168,17 @@ $section-top-padding-desktop: $nav-height + 110px;
 // GRAPHIC
 
 .section__graphic {
+  @include breakpoint(medium-desktop-down) {
+    padding-top: 30vh;
+  }
+
   @include breakpoint(large-desktop-up) {
     flex-basis: 600px;
   }
+
+  @supports (position: sticky) or (position: -webkit-sticky) {
+    padding-top: 0;
+  }
 }
 
 .section__graphic__figure {