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

Question

我试图让页面上的元素在滚动时淡入。够容易吧？不适合我。

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]);
        }

标签： javascriptscroll

Answer 1

我认为它应该解决它

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