learning about position sticky

src/assets/styles/_variables.scss

@@ -0,0 +1,16 @@
+// Typography
+
+$fontRegular: "Regular";
+$fontBold: "Bold";
+$fontLight: "Light";
+$fontBlack: "Black";
+
+$fontSizeBase: 16px;
+$fontSizeLarge: $fontSizeBase * 1.618;
+$fontSizeXLarge: $fontSizeLarge * 1.618 * 1.618;
+$fontSizeSmall: $fontSizeBase / 1.618;
+$fontSizeXSmall: $fontSizeSmall / 1.618;
+
+// Colors
+
+$colorTextGrey: #3a3a3a;

src/assets/styles/fonts/_fonts.scss

@@ -0,0 +1,24 @@
+@font-face {
+  font-family: "Regular";
+  font-style: normal;
+  src: url(assets/styles/fonts/SourceSansPro-Regular.ttf)
+    format("truetype");
+}
+@font-face {
+  font-family: "Bold";
+  font-style: normal;
+  src: url(assets/styles/fonts/SourceSansPro-Bold.ttf)
+    format("truetype");
+}
+@font-face {
+  font-family: "Light";
+  font-style: normal;
+  src: url(assets/styles/fonts/SourceSansPro-Light.ttf)
+    format("truetype");
+}
+@font-face {
+  font-family: "Black";
+  font-style: normal;
+  src: url(assets/styles/fonts/SourceSansPro-Black.ttf)
+    format("truetype");
+}

src/components/Animation.js

@@ -13,7 +13,7 @@ export class Animation {
   y = this.height / 2;
 
   constructor() {
-    this.canvas = select("body")
+    this.canvas = select("#grid")
       .append("canvas")
       .attr("id", "animation")
       .attr("width", this.width)

src/components/Content.js

@@ -14,7 +14,7 @@ export class Content {
   }
 
   init() {
-    this.contentWrapper = select("body")
+    this.contentWrapper = select("#grid")
       .append("div")
       .attr("id", "content-wrapper");
 
@@ -58,4 +58,16 @@ export class Content {
   scrollToTop() {
     select(`body`).node().scrollIntoView({ behavior: "smooth" });
   }
+
+  get node() {
+    return this.contentWrapper.node()
+  }
+
+  makeFixed(headerHeight = 250) {
+    console.log('in make fixed')
+    this.contentWrapper
+      .style("position", "sticky")
+      .style("height", `${window.innerHeight - headerHeight}px`)
+      .style("top", `${headerHeight}px`)
+  }
 }

src/components/StudentList.js

@@ -11,7 +11,7 @@ export class StudentList {
   }
 
   init() {
-    this.list = select(".container").append("div").attr("id", "student-list");
+    this.list = select("#grid").append("div").attr("id", "student-list");
 
     this.list
       .selectAll("div.row")

src/components/Title.js

@@ -2,11 +2,17 @@ import { select } from "d3";
 
 export class Title {
   constructor() {
-    this.el = select(".container")
+    this.el = select("#grid")
       .append("div")
       .attr("id", "page-title")
-      .text("Interactive Data Visualization")
       .classed("visible", false);
+
+    this.el.append("div")
+      .attr("class", "title")
+      .text("Interactive Data Visualization Showcase")
+
+    this.el.append("div").attr("class", "subtitle")
+      .text("Student portfolios from Spring 2020 Masters in Data Visualization Program at the CUNY Graduate Center")
   }
 
   makeVisible() {
@@ -16,4 +22,12 @@ export class Title {
   makeHidden() {
     this.el.classed("visible", false);
   }
+
+  makeFixed() {
+    this.el.classed("fixed", true);
+  }
+
+  makeUnFixed() {
+    this.el.classed("fixed", false);
+  }
 }

src/index.js

@@ -17,7 +17,9 @@ class Controller {
   };
 
   constructor() {
-    this.app = select("body").append("div").attr("class", "container");
+    select("body").append("div")
+      .attr("id", "grid")
+
     this.animation = new Animation();
     this.animation.startAnimation();
 
@@ -26,13 +28,29 @@ class Controller {
       this.init();
       console.log("this.data", this.data);
     });
+
+    this.handleScroll = this.handleScroll.bind(this)
   }
 
   init() {
+    // set it so window scrolls to top when reset
+    window.onbeforeunload = function () {
+      window.scrollTo(0, 0);
+    };
+
     this.title = new Title();
     this.studentList = new StudentList(this.data);
     this.content = new Content(this.data);
 
+    // to switch the title to fixed header on scroll
+    // observe when bottom content section comes into screen
+    this.observer = new IntersectionObserver(this.handleScroll, {
+      root: null,
+      rootMargin: '0px',
+      threshold: [.1],
+    });
+    this.observer.observe(this.content.node)
+
     // fade in the title and student list
     setTimeout(() => {
       this.title.makeVisible();
@@ -43,8 +61,15 @@ class Controller {
     window.addEventListener("resize", () => this.resize());
   }
 
+  handleScroll(entries) {
+    console.log('entries', entries)
+    if (entries[0].isIntersecting) {
+      this.title.makeFixed()
+    }
+    else this.title.makeUnFixed()
+  }
+
   resize() {
-    console.log("resizing");
     this.animation.resize();
   }
 }

src/style.scss

@@ -1,15 +1,22 @@
+@import "./assets/styles/fonts/fonts";
+@import "./assets/styles/variables";
+
 $duration: 1000ms;
+$maxWidth: 60em;
 
 body {
-  font-family: "Open Sans";
+  font-family: $fontRegular;
+  font-size: $fontSizeBase;
+  color: $colorTextGrey;
 }
-div.container {
-  padding: 1em;
+
+#grid{
   position: relative;
   display: grid;
-  grid-template-columns: 3fr 1fr;
-  grid-template-rows: 100vh auto;
-  z-index: 1;
+  grid-template-columns: repeat(12, [col-start] 1fr);
+  column-gap: 1%;
+  max-width:$maxWidth;
+  margin: 0 auto; // center
 }
 
 canvas#animation {
@@ -23,23 +30,59 @@ canvas#animation {
   position: sticky;
   top: 3rem;
   height: fit-content;
-  font-weight: 700;
-  font-size: 4em;
-  line-height: 1.2em;
   opacity: 0;
-  transition: opacity $duration;
-  color: transparent;
-  -webkit-text-stroke: black 2px;
+  transition: opacity $duration; // for fade in
+  grid-column: col-start /span 7;
+  padding: 0 2rem;
+
+  .title{
+    font-family: $fontBlack;
+    font-size: $fontSizeXLarge;
+    line-height: 1em;
+    color: transparent;
+    -webkit-text-stroke: black 1px;
+    transform-origin: left;
+    transition: transform $duration; // for transition to header
+  }
+
+  .subtitle{
+    margin-top: 1em;
+    max-width: 30em;
+    font-family: $fontRegular;
+  }
 
   &.visible {
     opacity: 1;
   }
+
+  &.fixed { // still postion:sticky from above
+    grid-column: col-start/span 12;
+    top: 0;
+    left: 0;
+    width: 100%;
+    background-color: white;
+    border-bottom: 0.5px solid #aaa;
+    box-sizing: border-box;
+    z-index: 5;
+
+    .title{
+      transform: scale(.8);
+      max-width: 40rem;
+    }
+
+    .subtitle{
+      display: none;
+    }
+  }
 }
 
 #student-list {
   position: relative;
   align-self: center;
-  // top: 3rem;
+  font-family: $fontLight;
+  grid-column: col-start 10/ span 3;
+  margin: 3rem 0;
+  min-height: 100vh;
 
   .row {
     opacity: 0;
@@ -51,7 +94,7 @@ canvas#animation {
     }
 
     &:hover {
-      font-weight: 700;
+      font-family: $fontBold;
     }
   }
 }
@@ -60,15 +103,16 @@ canvas#animation {
   position: relative;
   padding: 2rem;
   background-color: white;
+  grid-column: col-start / span 12;
 
   .student {
     position: relative;
     border-bottom: 0.5px black solid;
     padding: 1em 0;
 
     .student-name {
-      font-size: 3em;
-      font-weight: 700;
+      font-size: $fontSizeLarge;
+      font-family: $fontBold;
       text-transform: uppercase;
     }