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

Question

我试图使页面上的元素在滚动时淡入。够简单吧？不适合我。

HTML 是一个标准列表。 CSS 在滚动之前将所有元素的不透明度设置为 0。

我尝试仅使用 native JavaScript。

    // 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');
        }