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

我正在尝试使页面上的元素在滚动时淡入。很容易吧？不适合我。

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

我正在尝试仅使用本机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]);
        }

最佳答案

我认为应该解决

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