Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- import React from "react"
- import ReactDOM from "react-router-dom"
- class OnScrollComponent extends React.Component{
- constructor(props){
- super(props)
- this.state = {
- open: false,
- firstTransitionPosition: 0,
- scrollAppearanceAjustment: this.props.scrollAppearanceAjustment || 250
- }
- this.handleScroll = this.checkForScroll.bind(this)
- this.hasBeenSet = false
- }
- checkForScroll() {
- if (window.scrollY >= this.state.firstTransitionPosition && this.hasBeenSet == false) {
- console.log("this event is triggering")
- console.log(this.state.firstTransitionPosition)
- this.setState({open: true})
- this.hasBeenSet = true
- }
- }
- mouseEnter() {
- console.log("hello, the mouse is here")
- }
- mouseExit() {
- console.log("bye bye, the mouse is gone")
- }
- componentDidMount(){
- var transitionComp = this.refs.moveMe
- var topOfElement = transitionComp.getBoundingClientRect().top
- var heightOfElement = transitionComp.getBoundingClientRect().height
- this.setState({firstTransitionPosition: topOfElement - heightOfElement - this.state.scrollAppearanceAjustment}, () => {
- this.checkForScroll()
- });
- window.addEventListener('scroll', this.handleScroll);
- }
- componentWillUnmount(){
- window.removeEventListener('scroll', this.handleScroll);
- }
- render(){
- return(
- <div ref="moveMe" onMouseEnter={this.mouseEnter} onMouseLeave{this.mouseExit}
- className={`OnScrollComp ${this.state.open ? "visible" : ""}`} id={this.props.id}>
- {this.props.description} {this.props.link}
- </div>
- )
- }
- }
- module.exports = OnScrollComponent;
- .OnScrollComp {
- border-style: solid;
- border-color: black;
- border-width: thick;
- width: 600px;
- height: 300px;
- opacity: 0;
- transition: opacity 3s;
- pointer-events:none;
- }
- .OnScrollComp.visible {
- opacity: 1;
- pointer-events:none;
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement