React Base Fiddle (JSX)

Starting point for creating JSFiddles with React. This uses React with Addons.

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
<script src="https://npmcdn.com/react@latest/dist/react-with-addons.js"></script>
<script src="https://npmcdn.com/react-dom@latest/dist/react-dom.js"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>

<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

CSS

.OnScrollComp {
  border-style: solid;
  border-color: black;
  border-width: thick;
  width: 600px;
  height: 300px;
  opacity: 0;
  transition: opacity 3s;
}



.OnScrollComp.visible {
  opacity: 1;
}

JavaScript 1.7

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>
    )
  }
}

ReactDOM.render(
  <OnScrollComponent />,
  document.getElementById('container')
);