46 - Evento scroll (DOM)



Problema:Disponer un div en la parte superior izquierda de la pantalla que siempre sea visible.
<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Prueba</title>
    <link rel="stylesheet" href="estilos.css">
</head>

<body>
    <div id="mensaje">Mensaje siempre visible</div>
    <div id="textolargo">
        xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
        xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
        xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
    </div>
    <p>Línea 1.</p>
    <p>Línea 2.</p>
    <p>Línea 3.</p>
    <p>Línea 4.</p>
    <p>Línea 5.</p>
    <p>Línea 6.</p>
    <p>Línea 7.</p>
    <p>Línea 8.</p>
    <p>Línea 9.</p>
    <p>Línea 10.</p>
    <p>Línea 11.</p>
    <p>Línea 12.</p>
    <p>Línea 13.</p>
    <p>Línea 14.</p>
    <p>Línea 15.</p>
    <p>Línea 16.</p>
    <p>Línea 17.</p>
    <p>Línea 18.</p>
    <p>Línea 19.</p>
    <p>Línea 20.</p>
    <p>Línea 21.</p>
    <p>Línea 22.</p>
    <p>Línea 23.</p>
    <p>Línea 24.</p>
    <p>Línea 25.</p>
    <p>Línea 26.</p>
    <p>Línea 27.</p>
    <p>Línea 28.</p>
    <p>Línea 29.</p>
    <p>Línea 30.</p>
    <p>Línea 31.</p>
    <p>Línea 32.</p>
    <p>Línea 33.</p>
    <p>Línea 34.</p>
    <p>Línea 35.</p>
    <p>Línea 36.</p>
    <p>Línea 37.</p>
    <p>Línea 38.</p>
    <p>Línea 39.</p>
    <p>Línea 40.</p>
    <script src="funciones.js"></script>
</body>

</html>
body {
    margin-top: 90px;
}

#mensaje {
    position: absolute;
    top: 0px;
    left: 0px;
    color: #000;
    width: 300px;
    height: 80px;
    background-color: #ff0;
    text-align: center;
    font-family: arial;
    font-size: 30px;
}

#textolargo {
    width: 2048px;
}
window.addEventListener('scroll', () => {
    let mensaje = document.getElementById("mensaje")
    mensaje.style.top = window.scrollY + "px"
    mensaje.style.left = window.scrollX + "px"
})
Ver solución


Retornar