How can I fade a navbar with a scroll down with React?

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 {

    componentDidMount () {
        var scrollTop = $(window).scrollTop();
            if(scrollTop > 100) {
            } else {

    render() {

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

    }; // 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( 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;


Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

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

componentDidMount () {      
   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:
componentDidMount () {      
   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:
   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

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

All methods was sourced from or, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes
Article Rating
Notify of

Inline Feedbacks
View all comments
Would love your thoughts, please comment.x