スクロールで要素のクラスを追加する方法React js

Question

スクロールで要素のクラスを追加する方法React js、スクロールでクラスを追加し、ページの上にある場合はそのクラスを削除します。

import React from "react" 
import { Link } from "react-router" 
import { prefixLink } from "gatsby-helpers" 
import Helmet from "react-helmet" 
import { config } from "config" 

module.exports = React.createClass({ 
    propTypes() { 
    return { 
     children: React.PropTypes.any, 
    } 
    }, 
    render() { 
    window.addEventListener('scroll', (event) => { 

    }); 
    return (
     <div> 
     <header className="header"> 
      <div className="top-bar"> 
      <span><a href="tel:6788272782">678-827-2782 </a></span> 
      <span><a href="mailto:hellohello@knotel.com"> hellohello@knotel.com</a></span> 
      <button>Login</button> 
      </div> 
     </header> 
     {this.props.children} 
     </div> 
    ) 
    }, 

}) 

Answer 1

スクロールイベントでは、状態を使用してクラス名を管理し、状態を更新します。また、scrollの代わりにcomponentDidMount関数にスクロール・イベント・バインディングを移動する必要があります。

import React from "react" 
import { Link } from "react-router" 
import { prefixLink } from "gatsby-helpers" 
import Helmet from "react-helmet" 
import { config } from "config" 

module.exports = React.createClass({ 
    propTypes() { 
    return { 
     children: React.PropTypes.any, 
    } 
    }, 
    componentDidMount(){ 
     window.addEventListener('scroll', (event) => { 
     if(//scroll position is top){ 
      class = 'top'; 
     }else{ 
      class = 'normal'; 
     } 
     this.setState({ 
      activeClass: class 
     }) 
     }); 
    } 
    render() { 
    return (
     <div> 
     <header className="header"> 
      <div className={`top-bar ${this.state.activeClass}`}> 
      <span><a href="tel:6788272782">678-827-2782 </a></span> 
      <span><a href="mailto:hellohello@knotel.com"> hellohello@knotel.com</a></span> 
      <button>Login</button> 
      </div> 
     </header> 
     {this.props.children} 
     </div> 
    ) 
    }, 

})