SHARE
TWEET

is in viewport js

Centipede18 Sep 22nd, 2019 79 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1.  
  2. document.addEventListener("DOMContentLoaded", () => {
  3.   const isInViewport = el => {
  4.     // var bounding = element.getBoundingClientRect();
  5.     // return !(bounding.top > innerHeight || bounding.bottom < 0);
  6.    
  7.     const scroll = window.scrollY || window.pageYOffset;
  8.     const boundsTop = el.getBoundingClientRect().top + scroll;
  9.     const viewport = {
  10.       top: scroll,
  11.       bottom: scroll + window.innerHeight
  12.     };
  13.  
  14.     const bounds = {
  15.       top: boundsTop,
  16.       bottom: boundsTop + el.clientHeight
  17.     };
  18.  
  19.     return (
  20.       (bounds.bottom >= viewport.top && bounds.bottom <= viewport.bottom) ||
  21.       (bounds.top <= viewport.bottom && bounds.top >= viewport.top)
  22.     );
  23.   };
  24.  
  25.   let about = document.querySelector("#about");
  26.   let experience = document.querySelector("#experience");
  27.   let education = document.querySelector("#education");
  28.   let skills = document.querySelector("#skills");
  29.   let interests = document.querySelector("#interests");
  30.   let awards = document.querySelector("#awards");
  31.  
  32.  
  33.   let changeOpacity = (elem, elemName) => {
  34.     let elemChange = document.getElementById(`${elemName}Side`);
  35.     if (isInViewport(elem)) {
  36.  
  37.       elemChange.style.opacity = 1;
  38.     } else {
  39.       elemChange.style.opacity = 0.5;
  40.     }
  41.   };
  42.  
  43.   document.addEventListener("scroll", event => {
  44.     changeOpacity(about, "about");
  45.     changeOpacity(experience, "experience");
  46.     changeOpacity(education, "education");
  47.     changeOpacity(skills, "skills");
  48.     changeOpacity(interests, "interests");
  49.     changeOpacity(awards, "awards");
  50.   });
  51.  
  52.  
  53. });
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!
 
Top