如何使用 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 从字面上完全显示/隐藏了一个元素，因此该元素将始终完全显示或隐藏（换句话说，它不会缓慢淡出）。