Question

我需要对导航栏进行媒体查询，以更改垂直滚动条上的类。就像我喜欢的那样，它可以在桌面模式下工作，在移动设备上，类的高度不会正确改变。

我的反应还很新，还没有发现任何有用的东西来改变我的代码以达到想要的效果。

  class navbar extends React.Component {

  state = {
      color: 'white',
  }
  listenScrollEvent = e => {
      if (window.scrollY > 882) {
          this.setState({color: 'black', background: 'white', transition: '.2s', boxShadow: '0px 2px 8px rgba(0,0,0,.1)'})
      } else {
          this.setState({color: 'white', background: 'transparent', transition: '.2s', boxShadow: '0 0 0 rgba(0,0,0,.5)'})
    }
  }
  componentDidMount() {
      window.addEventListener('scroll', this.listenScrollEvent)
  }


  render () {

    return (


    <nav className="navbar" style={{color: this.state.color, background: this.state.background, transition: this.state.transition, boxShadow: this.state.boxShadow }}>
        <div className="navbar__body">
          <ToggleMenu click={this.props.menuClickHandler} />
          <h2 className="navbar__logo">j.p<span>Cazeau</span></h2>
          <ul className="navbar__items">
            <li><NavLink to="/"><i className="fab fa-facebook-f" style={{color: this.state.color}} /></NavLink></li>
            <li><NavLink to="/"><i className="fab fa-twitter" style={{color: this.state.color}} /></NavLink></li>
            <li><NavLink to="/"><i className="fab fa-youtube" style={{color: this.state.color}} /></NavLink></li>
          </ul>
        </div>
      </nav>
    )
  }
}
export default navbar

期望在不同的设备，移动设备，横向设备等上使导航栏类的高度正确。

我添加了一个Codepen https://codepen.io/jpCazeau/pen/VgxxOL

如何为滚动事件设置媒体查询

0 个答案: