Creating Sticky Navbar with drop shadow in React js

Question

I tried to build a sticky navbar with a drop shadow when scrolled. I tried adding on scroll on the nav, but it doesn't work.

import React, { Component } from 'react'
import { MenuItems } from "./navbar"
import './navbar.css'
import { Button} from "../Button";

class Navbar extends Component {
  state = { clicked : false}
  scroll = {scrolled : false}
  handleScroll = () => {
    const offset = window.scrollY;
    if (offset > 200) {
      this.setState({scrolled : !this.scroll.scrolled})
    }
  }
  handleClick = () => {
    this.setState({ clicked: !this.state.clicked})
  }

  render() {
    return(
      <div onScroll={this.handleScroll}>
      <nav className={this.scroll.scrolled ? "NavbarItems" : "NavbarItems Scroll"}>
        <h1 className="navbar-logo">React <i className="fab fa-react"></i></h1>
        <div className="menu-icon" onClick={this.handleClick}>
          <i className={this.state.clicked ? "fas fa-times" : 'fas fa-bars'}></i>
        </div>
        <ul className={this.state.clicked ? 'nav-menu active' : 'nav-menu'}>
          {
            MenuItems.map((items, index) => {
              return (
                <li key = {index}><a className={items.cName} href={items.url}>
                  {items.title}
                </a></li>
              );
            })
          }
        </ul>
        <Button> Contact US </Button>
      </nav>
      </div>
    );
  }
}
export default Navbar

What did I do wrong? is it not possible to do it like that?? I'm pretty new to react and javascript, so I'm guessing this isn't the right method to do it.

If there's any reference, please let me know. it would be delightful.

score 4 · Answer 1 · answered Jun 17 '21 at 22:18

I tried the solution above , but it didn't work on scrolling so I tried to put the logic inside the useEffect, and it works perfectly. Here is the code with Functional component :

  const Navbar = () => {
  const [scrolled, setScrolled] = useState(false);

  useEffect(() => {
    window.onscroll = function() {
      if (window.scrollY > 50) {
        setScrolled(true);
      } else {
        setScrolled(false);
      }
    };
  }, []);

  return (
    <div
      className={scrolled ? "navbar-container floatingNav" : "navbar-container"}
    >

Hisham___Pak · Accepted Answer · 2020-12-01T11:56:50.103

Your state is not in constructor method. When we use extended classes in react js we initialize our state in constructor method. This is not needed when we use functional components, reducing complexity and one of many reasons why functional components gained popularity.

Besides it I've done more you can see comments in code explaining other things.

class Navbar extends Component {
  constructor() {
    super(); // super allows you to access parent class's methods and allows us to use "this." in constructor().
    this.state = {
      clicked: false,
      scrolled: false,
    };
    // Note here too these bindings are necessary to make `this` work in the callback
    // In general, we use binding whenever we use "setState" when handling an event
    this.handleSroll = this.handleScroll.bind(this);
    this.handleClick = this.handleClick.bind(this);
  }

  handleScroll = () => {
    const offset = window.scrollY;
    if (offset > 200) {
      this.setState({ scrolled: !this.state.scrolled });
    }
  };

  handleClick = () => {
    this.setState({ clicked: !this.state.clicked });
  };

  render() {
    return (
      <div onScroll={this.handleScroll}>
        {/* Note here this.scroll.scrolled changes to this.state.scrolled */}
        <nav
          className={this.state.scrolled ? "NavbarItems" : "NavbarItems Scroll"}
        >
          <h1 className="navbar-logo">
            React <i className="fab fa-react"></i>
          </h1>
          <div className="menu-icon" onClick={this.handleClick}>
            <i
              className={this.state.clicked ? "fas fa-times" : "fas fa-bars"}
            ></i>
          </div>
          <ul className={this.state.clicked ? "nav-menu active" : "nav-menu"}>
            {MenuItems.map((items, index) => {
              return (
                <li key={index}>
                  <a className={items.cName} href={items.url}>
                    {items.title}
                  </a>
                </li>
              );
            })}
          </ul>
          <Button> Contact US </Button>
        </nav>
      </div>
    );
  }
}

export default Navbar;

More info on super();
Why we need to bind [info]
Go through react's official docs about handling events

I also suggest you to read about functional components.

@FARHANDIKAZAHRIRMUFTIGUENIA fixed it, happened mistakenly :) if you have problem understanding or there is some error let me know. — Hisham___Pak, Dec 01 '20 at 11:57
There's a problem, i didnt scroll anything and the shadow already dropped — FARHANDIKA ZAHRIR MUFTI GUENIA, Dec 01 '20 at 12:00
@FARHANDIKAZAHRIRMUFTIGUENIA It must be some logical error, it will be very hard to find it out without debugging in whole reproducible code. — Hisham___Pak, Dec 01 '20 at 12:06
@FARHANDIKAZAHRIRMUFTIGUENIA I think this could be it try it out: `{this.state.scrolled ? "NavbarItems" : "NavbarItems Scroll"}` should be `{this.state.scrolled ? "NavbarItems Scroll" : "NavbarItems"}` because if `scrolled` is true you'll need to add `Scroll` class otherwise not, and you did vice-versa — Hisham___Pak, Dec 01 '20 at 12:10
@FARHANDIKAZAHRIRMUFTIGUENIA if it worked out please consider marking it as an accepted answer. — Hisham___Pak, Dec 01 '20 at 15:24
well it fixed some of the problem, but the scrolling still not working. it didn't drop any shadow when I scrolled — FARHANDIKA ZAHRIR MUFTI GUENIA, Dec 02 '20 at 07:10

Ran Marciano · Answer 3 · 2020-12-01T10:40:20.820

your state should be in a constructor:

constructor(){
  super();
  this.state ={
      clicked : false,
      scrolled : false
   }
}

full change:

    import React, { Component } from 'react'
    import { MenuItems } from "./navbar"
    import './navbar.css'
    import { Button} from "../Button";
    
    class Navbar extends Component {
         constructor(){
               super();
               this.state ={
                   clicked : false,
                   scrolled : false
                }
             }
        handleScroll = () => {
            const offset = window.scrollY;
            if (offset > 200) {
                this.setState({scrolled : !this.state.scrolled})
            }
        }
        handleClick = () => {
            this.setState({ clicked: !this.state.clicked})
        }
    
        render() {
            return(
                <div onScroll={this.handleScroll}>
                <nav className={this.state.scrolled ? "NavbarItems" : "NavbarItems Scroll"}>
                    <h1 className="navbar-logo">React <i className="fab fa-react"></i></h1>
                    <div className="menu-icon" onClick={this.handleClick}>
                        <i className={this.state.clicked ? "fas fa-times" : 'fas fa-bars'}></i>
                    </div>
                    <ul className={this.state.clicked ? 'nav-menu active' : 'nav-menu'}>
                        {
                            MenuItems.map((items, index) => {
                                return (
                                    <li key = {index}><a className={items.cName} href={items.url}>
                                        {items.title}
                                    </a></li>
                                );
                            })
                        }
                    </ul>
                    <Button> Contact US </Button>
                </nav>
                </div>
            );
        }
    }
    export default Navbar

Does this fixes your problem?

i didnt scroll anything, and it shows drop shadow. so no, sorry — FARHANDIKA ZAHRIR MUFTI GUENIA, Dec 01 '20 at 10:30

Creating Sticky Navbar with drop shadow in React js

3 Answers3