仅限原生JavaScript-滚动到视口时元素不透明度发生变化

Question

I'm trying to make the elements on the page fade in on scroll. Easy enough right? Not for me.

HTML is a standard list. CSS sets all elements to opacity 0 prior to scrolling.

I'm trying to use Native JavaScript only.

    // get current page body
    var actBody = document.getElementById('acts-body');

    // on scroll function
    actBody.onscroll = function(){

        // get screen height
        var screenPosition = window.innerHeight;
        // get all text elements
        var artistName = document.getElementsByClassName('artist');

        // loop through all elements
        for(var i = 0; i < artistName.length; i++){

            // get each elements position from top
            var positionFromTop = artistName[i].getBoundingClientRect().top;

            // if element is in viewport add class
            if(positionFromTop - screenPosition <= 0){
                artistName[i].classList.add('txt-fadeIn');
            }
            else{
                artistName[i].classList.remove('txt-fadeIn');
            }

            console.log(artistName[i]);
        }

Answer 1

i think it should solve it

            if(screenPosition  - positionFromTop  <= 0){
            artistName[i].classList.add('txt-fadeIn');
        }