Javascript ativa css e desativa ao rolar scroll

Impts · 17 de janeiro de 2022

Alguém auxilia numa regra, ao rolar o scroll a partir do ponto 0, ativa regra css, e ao voltar pro ponto 0, desativa a regra.

Alexsander Gutierrez · 17 de janeiro de 2022

Olá boa noite, uma solução simples é utilizar o evento onscroll e pegar o scrollY para a janela ou o scrollTop para scroll dentro de um elemento como uma div e de acordo com o valor remover ou adicionar uma class com o estilo descrito, para algum elemento na página, fiz um exemplo mostrando isso na pratica

<!DOCTYPE html>
<html lang="pt-br">

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta charset="utf-8" />
    <style>
        .myclass > .box:nth-child(odd) {
            background-color: red;
        }
        
        .box {
            height: 200px;
            border: 1px solid #000;
            margin: 16px 0;
        }
    
        .withscroll{
            max-height: 100px;
            overflow-y: scroll;
            color: blue;
            text-align: center;
        }
        
        .bg-yellow {
            background-color: yellow !important;
        }
    </style>
</head>

<body>
    <div id="main">
        <div class="box" ></div>
        <div id="scrollbox" class="box withscroll" >
            <p>1</p>
            <p>2</p>
            <p>3</p>
            <p>4</p>
            <p>5</p>
        </div>
        <div class="box" ></div>
        <div class="box" ></div>
        <div class="box" ></div>
        <div class="box" ></div>
        <div class="box" ></div>
        <div class="box" ></div>
        <div class="box" ></div>
    </div>
    <script>
        const main = document.getElementById("main");
        const withscroll = document.getElementById('scrollbox');
        
        window.onscroll = function() {
            if(window.scrollY > 100) {
                main.classList.add("myclass");
            }else {
                main.classList.remove("myclass");
            }
        }
        
        withscroll.onscroll = function() {
            if(withscroll.scrollTop > 30) {
                withscroll.classList.add("bg-yellow");
            }else {
                withscroll.classList.remove("bg-yellow");
            }
        }
    </script>
</body>

</html>