Каждый раз, когда ваше состояние изменяется, оно вызывает рендеринг вашего компонента. Тем не менее, в вашем рендере ничего не изменится, потому что ваш рендеринг не зависит от this.state.scrollTop
. Чтобы исправить это, вам нужно сделать две вещи: 1. Обновить состояние, когда пользователь прокручивает порог (500px). ) 2. Используйте это новое значение состояния в вашем методе render() для повторного рендеринга компонента.
Я создал пример, где я изменяю прозрачность формы при изменении this.state.showEmailForm. Вы можете увидеть и ниже пример:
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
showEmailForm: false,
};
}
componentDidMount = () => {
window.addEventListener("scroll", this.onScroll);
};
componentWillUnmount = () => {
window.removeEventListener("scroll", this.onScroll);
};
onScroll = () => {
this.setState({
showEmailForm: window.scrollY > 500,
});
};
render() {
return (
<div className="app">
<p>
{" "}
Lorem ipsum dolor sit amet, consectetur adipiscing elit.Sed aliquet
iaculis tellus id faucibus.Sed pellentesque sit amet tortor a
mattis.Nullam ligula ante, condimentum eget ipsum vitae, fringilla
consequat lorem.Aliquam vitae enim sem.Morbi consequat quam vel
faucibus blandit.Fusce tempus fringilla neque sit amet eleifend.Nullam
enim augue, facilisis a vehicula id, malesuada ut sapien.Curabitur vel
dui ut risus placerat eleifend.Maecenas pulvinar magna ante, a congue
nibh laoreet id.In consectetur viverra ligula, a mattis dolor blandit
id.Aliquam ante massa, sollicitudin eget augue id, malesuada fringilla
sem.Sed viverra pretium dignissim.Morbi ut volutpat ante, sed
tincidunt quam.Praesent placerat, ipsum commodo venenatis sodales,
tellus ante pellentesque ante, ac ultrices massa velit et velit.{" "}
</p>
<form
style={{
opacity: this.state.showEmailForm ? 1 : 0,
}}
>
<label>
Name <br />
<input type="text" />
</label>
<label>
Email <br />
<input type="email" />
</label>
<input type="submit" value="Submit" />
</form>
</div>
);
}
}
const rootElement = document.querySelector("#container");
ReactDOM.render(<App />, rootElement);
.app {
height: 1000vh;
background: palevioletred;
padding: 1em;
display: flex;
}
p {
font-size: 2em;
width: 50%;
}
input {
display: block;
}
label {
font-weight: bold;
}
form {
padding: 1em;
position: fixed;
top: 1em;
right: 1em;
transition: opacity 0.5s;
}
<div id="container"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>