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

IT技术 javascript jquery css reactjs
2021-05-07 01:23:12

在动画问题中使用 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;
      }
    }
1个回答

有一种“react友好”的方式来做到这一点（即，不使用 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 从字面上完全显示/隐藏元素，因此该元素将始终完全显示或隐藏（换句话说，它不会缓慢淡入淡出） ）。

其它你可能感兴趣的问题
上一篇react：状态不会在第一次点击时更新 下一篇更新已编辑输入的值