Actualizar el estilo de un componente onScroll en React.js

Solución:

Deberías vincular al oyente en componentDidMount, de esa forma solo se crea una vez. Debería poder almacenar el estilo en estado, el oyente probablemente fue la causa de los problemas de rendimiento.

Algo como esto:

componentDidMount: function() {
    window.addEventListener('scroll', this.handleScroll);
},

componentWillUnmount: function() {
    window.removeEventListener('scroll', this.handleScroll);
},

handleScroll: function(event) {
    let scrollTop = event.srcElement.body.scrollTop,
        itemTranslate = Math.min(0, scrollTop/3 - 60);

    this.setState({
      transform: itemTranslate
    });
},

Puede pasar una función al onScroll evento en el elemento React: https://facebook.github.io/react/docs/events.html#ui-events

<ScrollableComponent
 onScroll={this.handleScroll}
/>

Otra respuesta que es similar: https://stackoverflow.com/a/36207913/1255973

Mi solución para hacer una barra de navegación receptiva (posición: ‘relativa’ cuando no se desplaza y fija cuando se desplaza y no en la parte superior de la página)

componentDidMount() {
    window.addEventListener('scroll', this.handleScroll);
}

componentWillUnmount() {
    window.removeEventListener('scroll', this.handleScroll);
}
handleScroll(event) {
    if (window.scrollY === 0 && this.state.scrolling === true) {
        this.setState({scrolling: false});
    }
    else if (window.scrollY !== 0 && this.state.scrolling !== true) {
        this.setState({scrolling: true});
    }
}
    <Navbar
            style={{color: '#06DCD6', borderWidth: 0, position: this.state.scrolling ? 'fixed' : 'relative', top: 0, width: '100vw', zIndex: 1}}
        >

No tengo problemas de rendimiento.

---

---

Utiliza Nuestro Buscador