scroll

CrimsonPug · CrimsonPug · commit e4b66a07c448 · 2016-12-25T12:46:54.000-05:00
diff --git a/13 - Slide in on Scroll/index-START.html b/13 - Slide in on Scroll/index-START.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+ <!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8">
@@ -60,24 +60,25 @@ <h1>Slide in on Scroll</h1>
 
     const sliderImages = document.querySelectorAll('.slide-in');
 
-    function checkSlide(e) {
-      sliderImages.forEach(sliderImage => {
-        // half way through the image
-        const slideInAt = (window.scrollY + window.innerHeight) - sliderImage.height / 2;
-        // bottom of the image
-        const imageBottom = sliderImage.offsetTop + sliderImage.height;
-        const isHalfShown = slideInAt > sliderImage.offsetTop;
+    function checkSlide(e){
+      //half image
+      sliderImages.forEach(slideImage =>{
+        const slideInAt = (window.scrollY + window.innerHeight) - slideImage.height/2;
+        //bottom of the image
+        const imageBottom = slideImage.offsetTop + slideImage.height;
+        const isHalfShown = slideInAt > slideImage.offsetTop;
+        // console.log(isHalfShown);
         const isNotScrolledPast = window.scrollY < imageBottom;
+        console.log(isNotScrolledPast);
         if (isHalfShown && isNotScrolledPast) {
-          sliderImage.classList.add('active');
-        } else {
-          sliderImage.classList.remove('active');
+          slideImage.classList.add('active');
+        }else{
+          slideImage.classList.remove('active');
         }
-      });
+      }); 
     }
 
-    window.addEventListener('scroll', debounce(checkSlide));
-
+    window.addEventListener('scroll',debounce(checkSlide));
   </script>
 
   <style>
