He estado tratando de colocar un elemento en una posición fija dentro de una altura de desplazamiento dada con Javascript. Fuera de este rango de altura, la posición debe volver a ser relativa.
Esto es lo que he hecho hasta ahora. La position:fixed está dentro de la clase about-option . Cuando llega a 4680, se agrega la clase.
¿Cómo hago para que tenga un punto final de altura de 5800, es decir, 4680 - 5800, y también elimino la clase fuera de este rango de altura?
window.onscroll = function () { myFunction(); }; function myFunction() { if ( document.documentElement.scrollTop > 4680 || document.body.scrollTop > 4680 ) { document.getElementById("about-txt").classList.add("about-option"); } else { document.getElementById("about-text").className = ""; } }CSS
.about-option { position: fixed; top: 20%; width: 40%; right: 7%;Supongo que está tratando de hacer lo que hace la posición fija: una vez que el elemento toca el límite superior de la ventana, comienza a pegarse y si se desplaza a la inversa, vuelve a moverse junto con el contenido. Como aquí:
https://codepen.io/elad2412/pen/QYLEdK
<main class="main-container"> <header class="main-header">HEADER</header> <div class="main-content">MAIN CONTENT</div> <footer class="main-footer">FOOTER</footer> </main> body{color:#fff; font-family:arial; font-weight:bold; font-size:40px; } .main-container{ max-width:600px; margin:0 auto; border:solid 10px green; padding:10px; margin-top:40px;} .main-container *{padding:10px;background:#aaa; border:dashed 5px #000;} .main-container * + *{margin-top:20px;} .main-header{ height:50px; background:#aaa; border-color:red; } .main-content{ min-height:1000px; } .main-header{position:-webkit-sticky; position:sticky; top:0;}El truco es recordar agregar un contenedor fuera del elemento adhesivo, de lo contrario, no funcionará.
¡Espero que ayude!