如何使用React向下滚动淡化导航栏？

Question

将jQuery与React结合使用来解决动画问题是真的吗？将CSS类与状态一起使用会更好吗？

我有一个带有导航栏菜单的模板，但是我想通过向下滚动该栏来执行jQuery淡入淡出，这与我的模板或如何添加这种效果是不对的

我有一个名为Landing.js的主模板

import React from 'react';

import NavbarBoots from './Vitae-Plantilla/NavbarBoots';
import NavbarLanding from './Landing-Plantilla/NavbarLanding';
import CabeceraLanding from './Landing-Plantilla/CabeceraLanding';
import CuerpoLanding from './Landing-Plantilla/CuerpoLanding';
import PieLanding from './Landing-Plantilla/PieLanding';

export default class Landing extends React.Component {

    componentDidMount () {
        var scrollTop = $(window).scrollTop();
        $(window).scroll(function(){
            if(scrollTop > 100) {
                $('#.main_h').fadeOut();
            } else {
                $('#.main_h').fadeIn();
            }

        });
    }
    render() {

        return (
          <div className="container-landing">
                <header id=".main_h"className=".main_h">
                        <NavbarBoots/>
                    <div className="cabecera-landing">
                        <CabeceraLanding title="Cabecera" subtitle="el pais del nunca jamás."/>
                    </div>
                </header> 
                    <div className="body-landing-">
                        <div className="cuerpo-landing">
                            <CuerpoLanding title="Acerca de mi."/>
                        </div>
                        <div className="pie-landing">
                            <PieLanding title="pie"/>
                        </div>

                    </div>
          </div>
        ); 
    }; // render
} // Landing

这些是我页面的样式，但是如何使导航栏也掉下来。

.container-landing {
  .main_h {
    background: url(http://www.vqronline.org/sites/vqr.virginia.edu/files/story-images/petrusich_honis_opener_cssp_aur-mw_oct2015_1.jpg) center no-repeat;

      position: fixed;
      top: 0px;
      max-height: 70px;
      z-index: 999;
      width: 100%;
      padding-top: 17px;
      background: none;
      overflow: hidden;
      -webkit-transition: all 0.3s;
      transition: all 0.3s;
      opacity: 0;
      top: -100px;
      padding-bottom: 6px;
      font-family: "Montserrat", sans-serif;
    }
    .main_h .sticky{
      background-color: rgba(255, 255, 255, 0.93);
      opacity: 1;
      top: 0px;
      border-bottom: 1px solid gainsboro;
    }
    @media only screen and (max-width: 766px) {
      .main_h {
        padding-top: 25px;
      }
    }

Answer 1

有一种“反应友好”的方式（例如，无需使用jquery操纵DOM元素）：

componentDidMount () {      
   window.onscroll =()=>{
       this.setState({currentScrollHeight: window.scrollY})
  }
}

唯一的问题是，每次滚动高度变化时，字面值都会重新渲染，即使只有1个像素也是如此。如果价格太昂贵，则可以将值舍入到最接近的值，例如50：

componentDidMount () {      
   window.onscroll =()=>{
    const newScrollHeight = Math.ceil(window.scrollY / 50) *50;
    if (this.state.currentScrollHeight != newScrollHeight){
        this.setState({currentScrollHeight: newScrollHeight})
    }
  }
}

然后在渲染中，类似：

render(){
   const opacity = Math.min(100 / this.state.currentScrollHeight  , 1)

    return <div style={{opacity}} id='element-you-want-to-fade'> </div>
}

您可以尝试使用这些值（更改100，也许给它一个初始值），使它以您想要的方式淡入淡出。

另外，对于纯CSS库解决方案，您可能需要查看http://scrollmagic.io/

除了将jquery与react混合在一起之外，您所拥有的问题是，fadeIn和fadeOut确实完全显示/隐藏了一个元素，因此该元素将始终被完全显示或隐藏（换句话说，它不会变慢） ）。