Tengo este div en mi página de inicio y quiero que se mueva conmigo cuando me desplace: intenté usar position:sticky; y posición: fija y agregando la parte superior: 600px; pero no se mueve hacia arriba, está atascado en la parte inferior
.linkss { color: #8892b0; font-family: 'NTR', sans-serif; font-size: 25px; right: 10px; top: 680px; padding-right: 30px; position: fixed; } .linkss h3 { margin: 0px; height: 50px; color: #c9c1f5; } .linkss a { border: 0px; display: block; padding: 0px; margin: 0px; font-size: 23px; padding-left: 30px; color: #c9c1f5; height: 30px; width: 110px; } <div className="linkss"> <h3>/ Links</h3> <a href="https://www.etsy.com/ca/shop/VanillaUnlimited">/ Etsy Shop </a> <a href="https://www.etsy.com/ca/shop/VanillaUnlimited">/ LinkedIn </a> <a href="https://www.etsy.com/ca/shop/VanillaUnlimited">/ Instagram </a> </div>Debe usar addEventListener en componentDidMount como se muestra a continuación:
componentDidMount() { document.addEventListener('scroll', this.doSomething) } doSomething = () => { if (window.pageYOffset > 100) { // add a new class (with top: 0) to element or change style of element by top = 0 } else { // do something else } }Creo que está atascado en la parte inferior porque le top:680px; disminúyalo a algo más pequeño como 20px . Y establezca la propiedad position en position:sticky;