diff --git a/css/style.css b/css/style.css index 0b25ad8..de876e6 100755 --- a/css/style.css +++ b/css/style.css @@ -152,7 +152,6 @@ body { padding-top: 10px; width: 100%; position: fixed; - background: black; z-index: 999; } #top div { margin: auto; @@ -179,15 +178,15 @@ body { transition-property: size; transition-duration: .2s; } -.small .hideable { - display: none; - opacity: 0; } - -.small img { - max-width: 200px; } - -.small h2 { - font-size: 1em; } +.small { + background: black; } + .small .hideable { + display: none; + opacity: 0; } + .small img { + max-width: 200px; } + .small h2 { + font-size: 1em; } .large img { width: 100%; diff --git a/index.html b/index.html index 1c26215..bf66e86 100755 --- a/index.html +++ b/index.html @@ -20,7 +20,8 @@ @@ -74,7 +75,7 @@ @@ -190,15 +191,15 @@ var sp = document.getElementById("scrollprompt"); document.addEventListener("scroll", function() { last_known_scroll = getScrollY(); - sc(last_known_scroll); + // sc(last_known_scroll); // Usually an important performance consideration, this ends up significantly delaying the resizing of the top box, which is important to stay sized correctly - // if (!queueing) { - // window.requestAnimationFrame(function() { - // sc(last_known_scroll); - // queueing = false; - // }); - // } - // queueing = true; + if (!queueing) { + window.requestAnimationFrame(function() { + sc(last_known_scroll); + queueing = false; + }); + } + queueing = true; }); sc(last_known_scroll); @@ -206,11 +207,11 @@ //execute scroll style modifications function sc(ypos) { - var wheight = window.innerHeight; + var windowHeight = window.innerHeight; //top thing var topDiv = document.getElementById("top"); var mast = document.getElementById("mast"); - var hcalc = wheight - ypos; + var hcalc = windowHeight - ypos; var topHeight = 100; if (hcalc > 100) { topHeight = hcalc; @@ -219,17 +220,17 @@ } // var mastHeight = mast.clientHeight; // var halfHeight = Math.floor((topHeight / 2) - (mastHeight / 2)); - if (topHeight < 300) { - mast.className = "small"; + if (topHeight < 315) { + topDiv.className = "small"; } else { - mast.className = "large"; + topDiv.className = "large"; } - topDiv.style.height = topHeight + "px"; + topDiv.style.height = topHeight - 10 + "px"; //subtract 10 to account for padding-top on #top // console.log("topheight is " + topHeight + " and topDiv.style.height = " + topDiv.style.height); // mast.style.marginTop = halfHeight + "px"; //background thing - var p = ((wheight - ypos) / wheight); //calulate ratio of scroll + var p = ((windowHeight - ypos) / windowHeight); //calulate ratio of scroll // x.innerHTML = " " + String(parseInt(p * 100)); //display it var rgb = Math.floor(Math.abs(1 - p) * 255); //set the color // var colorString = "rgb(" + rgb + "," + rgb + "," + rgb + ")"; @@ -238,7 +239,7 @@ } function getScrollY() { - //internet explorer does not have a window.scrollY property, so we need to make our own + //internet explorer does not have a window.scrollY property, it has pageYOffset return typeof window.scrollY === "undefined" ? window.pageYOffset : window.scrollY; } diff --git a/sass/style.scss b/sass/style.scss index c52f330..2efb4be 100755 --- a/sass/style.scss +++ b/sass/style.scss @@ -38,7 +38,7 @@ body { padding-top: 10px; width: 100%; position: fixed; - background: black; + // background: black; z-index: 999; div { margin: auto; @@ -76,6 +76,7 @@ body { //small and large classes are applied to #top .small { + background: black; .hideable { display: none; opacity: 0;