javascript - How can I fade a navbar with a scroll down with React? - Stack Overflow

admin管理员组

文章数量:1307050

is it true that using jQuery with React for animation issues, among others is a bad idea? is it better to use css classes with states?

I have this template with a navbar menu but I would like with the scroll down the bar to perform a jquery fade, which is wrong with my template or how can I add such effect

I have my main template called 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 {

    ponentDidMount () {
        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

these are the styles of my page but how can I make the navbar go down too.

.container-landing {
  .main_h {
    background: url(.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;
      }
    }

is it true that using jQuery with React for animation issues, among others is a bad idea? is it better to use css classes with states?

I have this template with a navbar menu but I would like with the scroll down the bar to perform a jquery fade, which is wrong with my template or how can I add such effect

I have my main template called 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 {

    ponentDidMount () {
        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

these are the styles of my page but how can I make the navbar go down too.

.container-landing {
  .main_h {
    background: url(http://www.vqronline/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;
      }
    }

• javascript
• jquery
• css
• reactjs

Share Improve this question Follow asked Oct 12, 2017 at 22:19 Gerardo BautistaGerardo Bautista 89144 gold badges1313 silver badges2020 bronze badges 1

• In general I would say using css animations where possible is preferred over the jQuery, or any javascript, derived animation methods. The reason being that animations implemented by css itself can potentially benefit from the browser optimizing the operation with the gpu. Typically animations done with javascript are going to involve frequent changes to the DOM which will result in frequent page redraws and such, which from a performance standpoint, and potentially fluid flow of your animation, is a bad thing. This is what I've gathered from my own personal research. – Taplar Commented Oct 12, 2017 at 22:40

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

There's a "react-friendly" way of doing this (i.e, without manipulating DOM element with jquery):

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

The only problem with this is it will rerender literally every time the scroll height changes, even if by just 1 pixel. If that gets too expensive, you can round the value to the nearest, say 50:

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

And then in render, something like:

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

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

You can experiment with the values (change 100, maybe give it a starting value) to get it to fade the way you want.

Alternatively, for a pure-css library solution, you may want to look into http://scrollmagic.io/

The problem with what you have, other than mixing jquery with react, is that fadeIn and fadeOut literally pletely show/hide an element, so the element will always either be pletely shown or hidden (in other words, it won't slow-fade).

本文标签： javascriptHow can I fade a navbar with a scroll down with ReactStack Overflow