I'm facing a challenge that seems simple, but I can't seem to find the solution. How can I trigger a scroll event once a certain point on the page has been scrolled past?
Just to clarify, I already know how to handle scroll events; my specific question is about triggering events at specific "scroll points."
In essence, I want to implement a functionality where certain words fade in when scrolled past specific points on the page.
Below is a snippet of code where I've attempted to address this:
import React, { Component } from 'react';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
class Nav extends Component {
state = {
background: "",
backgroundImage: "linear-gradient(to bottom right, white, white",
navSize: "83px"
}
componentDidMount() {
window.addEventListener('scroll', this.handleScroll);
}
componentWillUnmount() {
window.removeEventListener('scroll', this.handleScroll);
}
handleScroll = () => {
let currentPosition = 0;
currentPosition = (document.body.getBoundingClientRect()).top;
console.log(currentPosition);
if(currentPosition === 116) {
this.setState({navSize: "130px"})
} else {
this.setState({navSize: "100px"})
};
}
render() {
const { backgroundImage, navSize } = this.state;
return(
<div style={{ backgroundImage }} className="nav-root">
<div style={{ height: navSize }} className="nav-inner-wrapper">
<div className="nav-normal">
<h3 className="font-size-increase0" >RandomText + The Triangular = RandomText</h3>
</div>
</div>
</div>
)
}
}
Nav.propTypes = {
user: PropTypes.shape({
email: PropTypes.string
}),
logout: PropTypes.func
};
Nav.contextTypes= {
router: PropTypes.object.isRequired
}
export default connect(null, {})(Nav);