Breaking News: Grepper is joining You.com. Read the official announcement!

react change topbar background on scroll

DevPedrada answered on October 26, 2022 Popularity 2/10 Helpfulness 3/10

answer react change topbar background on scroll

react change topbar background on scroll

Comment

import React, { useState, useEffect } from "react"
// importing navbar styles
import "../assets/css/navbar.css"
import logo from "../assets/images/logo.svg"
import logoBlue from "../assets/images/logo-blue.svg"
// responsive menu toggle icon
import { FaAlignRight } from "react-icons/fa"
// all the navbar links coming from the links constants
import pageLinks from "../constants/links"
// Link from gatsby
import { Link } from "gatsby"
const Navbar = () => {
  //navbar scroll when active state
  const [navbar, setNavbar] = useState(false)

  //logo scroll when active
  const [navbarLogo, setNavbarLogo] = useState(logo)

  //navbar scroll changeBackground function
  const changeBackground = () => {
    console.log(window.scrollY)
    if (window.scrollY >= 66) {
      setNavbar(true)
    } else {
      setNavbar(false)
    }
  }

  useEffect(() => {
    changeBackground()
    // adding the event when scroll change background
    window.addEventListener("scroll", changeBackground)
  })

  //logo scroll function
  const changeLogo = () => {
    if (window.scrollY >= 60) {
      setNavbarLogo(logoBlue)
    } else {
      setNavbarLogo(logo)
    }
  }

  useEffect(() => {
    changeLogo()
    // adding the event when scroll change Logo
    window.addEventListener("scroll", changeLogo)
  })

  return (
    <nav className={navbar ? "navbar active" : "navbar"}>
      <div className="nav-center">
        <div className="nav-header">
          <Link to="/">
            <img src={navbarLogo} alt="logo" />
          </Link>
          <button type="button" className="toggle-btn">
            <FaAlignRight />
          </button>
        </div>
        <div className="nav-links">
          {pageLinks.map(links => {
            return (
              <Link key={links.id} to={links.url}>
                {links.text}
              </Link>
            )
          })}
        </div>
      </div>
    </nav>
  )
}

export default Navbar

Popularity 2/10 Helpfulness 3/10 Language javascript

Source: dev.to

Tags: background javascript scroll

Link to this answer
Share Copy Link

Contributed on Oct 26 2022

DevPedrada

0 Answers Avg Quality 2/10

react change topbar background on scroll

Contents

More Related Answers

react change topbar background on scroll

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.