Question

对于动画问题使用带有React的jQuery是否属实，这是一个坏主意？将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，也许给它一个起始值），让它以你想要的方式消失。

或者，对于pure-css库解决方案，您可能需要查看http://scrollmagic.io/

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

如何通过向下滚动React来淡化导航栏？

1 个答案: