Gross IE hack for getting the scroll position of the window

index.html

@@ -20,15 +20,15 @@
         var mast;
 
         function bgColor() {
-            console.log("innerHeight = " + window.innerHeight + ", window.scrollY = " + window.scrollY);
+            var p = ((window.innerHeight - getScrollY()) / window.innerHeight); //calulate ratio of scroll
-            var p = ((window.innerHeight - window.scrollY) / window.innerHeight); //calulate ratio of scroll
-            console.log(p);
             x.innerHTML = " " + String(parseInt(p * 100)); //display it
             var rgb = Math.floor(Math.abs(1 - p) * 255); //set the color
-            console.log(rgb);
             var colorString = "rgb(" + rgb + "," + rgb + "," + rgb + ")";
             document.body.style.backgroundColor = colorString;
-            console.log(colorString);
+        }
+        function getScrollY(){
+            //internet explorer does not have a window.scrollY property, so we need to make our own
+            return typeof window.scrollY === "undefined" ? window.pageYOffset : window.scrollY;
         }
     </script>
     <style>

scroll.js

@@ -10,7 +10,7 @@ var startTime = null;
 function smoothScroll(targetId){
     target = document.getElementById(targetId);//grab the element
     targetHeight = target.offsetTop; //get its height
-    currentHeight = window.scrollY; //grab the current scroll position
+    currentHeight = getScrollY(); //grab the current scroll position
     startTime = null; //we have to reset the start time every time the animation runs
     if(currentHeight != targetHeight){
         window.requestAnimationFrame(animateScroll);//schedule the animation
@@ -19,11 +19,11 @@ function smoothScroll(targetId){
 function animateScroll(timeStamp){
     if (startTime == null) startTime = timeStamp; //record the time the animation started if we're just starting
     var deltaStep = (timeStamp - startTime) * speed; //timeStamp - startTime gives us miliseconds since the animation started, we scale this down because its usually in the hundreds.
-    currentHeight = window.scrollY; //record the current scroll position of the window
+    currentHeight = getScrollY(); //record the current scroll position of the window
     var offsetScroll = targetHeight - currentHeight; //calculate how far we still need to go
     var deltaScroll = deltaStep  * offsetScroll; //decide how far to scroll this tick
     window.scroll(0, currentHeight + deltaScroll); //scroll!
-    currentHeight = window.scrollY;//re-record the current height after scrolling for comparison
+    currentHeight = getScrollY();//re-record the current height after scrolling for comparison
     if(currentHeight != targetHeight){ //schedule another tick if we need to
         window.requestAnimationFrame(animateScroll);
     }

style.css

@@ -13,7 +13,7 @@ body {
   transition: none; }
 
 #mast {
-  background: black;
+  background: none;
   line-height: 1.2;
   color: white; }
   #mast a {

style.css.map

@@ -1,6 +1,6 @@
 {
 "version": 3,
-"mappings": "AAIA,oBAAO;EACH,OAAO,EAAE,GAAG;EACZ,MAAM,EAAE,GAAG;EACX,KAAK,EAAE,IAAI;;AAEf,CAAC;EACG,mBAAmB,EAAE,GAAG;;AAI5B,IAAK;EAED,WAAW,EAAE,KAAK;EAClB,SAAS,EAAE,GAAG;EACd,WAAW,EAAE,GAAG;EAChB,UAAU,EAAE,IAAI;;AAGpB,KAAM;EACF,UAAU,EAAE,KAAK;EACjB,WAAW,EAAE,GAAG;EAChB,KAAK,EAAE,KAAK;EACZ,OAAE;IACE,KAAK,EAAE,KAAK;IACZ,UAAU,EAAE,MAAM;EAEtB,aAAO;IACH,KAAK,EA5BN,OAAO;EA8BV,UAAK;IACD,UAAU,EAAE,MAAM;IAClB,KAAK,EAjCN,IAAI;EAmCP,SAAI;IACA,KAAK,EAAE,IAAI;IACX,SAAS,EAAE,KAAK;;AAKpB,QAAG;EACC,eAAe,EAAE,SAAS;EAC1B,UAAU,EAAE,MAAM;EAClB,UAAC;IACG,KAAK,EAAE,KAAK;;AAMpB,UAAK;EACD,UAAU,EAAE,KAAK;AAErB,WAAM;EACF,UAAU,EAAE,KAAK;;AASzB,MAAO;EAEH,OAAO,EAAE,GAAG;EACZ,UAAI;IACA,kBAAkB;IAClB,SAAS,EAvET,KAAK;IAwEL,MAAM,EAAE,IAAI;;AAIpB,KAAM;EACF,MAAM,EAAE,KAAK;EACb,KAAK,EAAE,IAAI;;AAGf,UAAW;EACP,OAAO,EAAE,KAAK;;AAGlB,MAAO;EACH,qBAAqB,EAAE,GAAG;EAC1B,SAAS,EAAE,IAAI;;AAGnB,aAAc;EACV,OAAO,EAAE,SAAS;;AAGtB,EAAG;EACC,SAAS,EAAE,GAAG;;AAGlB,EAAG;EACC,WAAW,EAAE,MAAM;EACnB,UAAU,EAAE,MAAM",
+"mappings": "AAIA,oBAAO;EACH,OAAO,EAAE,GAAG;EACZ,MAAM,EAAE,GAAG;EACX,KAAK,EAAE,IAAI;;AAEf,CAAC;EACG,mBAAmB,EAAE,GAAG;;AAI5B,IAAK;EAED,WAAW,EAAE,KAAK;EAClB,SAAS,EAAE,GAAG;EACd,WAAW,EAAE,GAAG;EAChB,UAAU,EAAE,IAAI;;AAGpB,KAAM;EACF,UAAU,EAAE,IAAI;EAChB,WAAW,EAAE,GAAG;EAChB,KAAK,EAAE,KAAK;EACZ,OAAE;IACE,KAAK,EAAE,KAAK;IACZ,UAAU,EAAE,MAAM;EAEtB,aAAO;IACH,KAAK,EA5BN,OAAO;EA8BV,UAAK;IACD,UAAU,EAAE,MAAM;IAClB,KAAK,EAjCN,IAAI;EAmCP,SAAI;IACA,KAAK,EAAE,IAAI;IACX,SAAS,EAAE,KAAK;;AAKpB,QAAG;EACC,eAAe,EAAE,SAAS;EAC1B,UAAU,EAAE,MAAM;EAClB,UAAC;IACG,KAAK,EAAE,KAAK;;AAMpB,UAAK;EACD,UAAU,EAAE,KAAK;AAErB,WAAM;EACF,UAAU,EAAE,KAAK;;AASzB,MAAO;EAEH,OAAO,EAAE,GAAG;EACZ,UAAI;IACA,kBAAkB;IAClB,SAAS,EAvET,KAAK;IAwEL,MAAM,EAAE,IAAI;;AAIpB,KAAM;EACF,MAAM,EAAE,KAAK;EACb,KAAK,EAAE,IAAI;;AAGf,UAAW;EACP,OAAO,EAAE,KAAK;;AAGlB,MAAO;EACH,qBAAqB,EAAE,GAAG;EAC1B,SAAS,EAAE,IAAI;;AAGnB,aAAc;EACV,OAAO,EAAE,SAAS;;AAGtB,EAAG;EACC,SAAS,EAAE,GAAG;;AAGlB,EAAG;EACC,WAAW,EAAE,MAAM;EACnB,UAAU,EAAE,MAAM",
 "sources": ["style.scss"],
 "names": [],
 "file": "style.css"

style.scss

@@ -21,7 +21,7 @@ body {
 }
 
 #mast {
-    background: black; 
+    background: none; 
     line-height: 1.2;
     color: white;
     a {