0

I'm new to pure Javascript and struggling to change the opacity of an element when it's between 30% and 60% of the viewport. I would appreciate it if you could look through my code and point out any errors. Thanks!

var parent = document.documentElement;
var elements = document.getElementsByClassName('.text');    
var elementHeight = document.getElementsByClassName('.text').clientHeight;
var gridTop = parent.clientHeight * .2;
var gridBottom = parent.clientHeight * .6;

window.addEventListener('scroll', function() {

 for (var i = 0; i < elements.length; i++) {
  var thisTop = elements[i].offsetTop - parent.scrollTop;

   if (thisTop >= gridTop && (thisTop + elementHeight) <= gridBottom) {
    elements.style.opacity = ".3";
   } else {
    elements.style.opacity = ".055";
   }

  };
});
Cong Kim
  • 1
  • Possible duplicate of [How to dynamically detect browser viewport change in size?](https://stackoverflow.com/questions/28699255/how-to-dynamically-detect-browser-viewport-change-in-size) – Luka Čelebić Apr 17 '18 at 20:08
  • do you have a valid reason as to why you **must** do this using JavaScript? – Rushikumar Apr 17 '18 at 20:09
  • 1
    Well, you using need using `document.getElementsByClassName('text')` instance of `document.getElementsByClassName('.text')`. Dont using "."(dot) – Olaf Erlandsen Apr 17 '18 at 20:10
  • using `document.querySelectorAll(".text")` instance of `getElementsByClassName` – Olaf Erlandsen Apr 17 '18 at 20:11

0 Answers0