Change style of header component on scroll on home page only in React.Js

Asked
Active3 hr before
Viewed126 times

9 Answers

headerstylecomponentreactchange
90%

And you should use a condition to match URL that works only on home page.,I have used the following approach to change the style of my header on scroll which is working fine. Referred this answer,The problem is that it works on every route(component) as I have the header component included in the App.js file but I want it to work specifically on the Home page only.

And you should use a condition to match URL that works only on home page.

state = {
   scrolled: false
};

componentDidMount() {
   window.addEventListener('scroll', this.handleScroll);
}
componentWillUnmount() {
   window.removeEventListener('scroll', this.handleScroll);
}

handleScroll = () => {
const isTop = window.scrollY < 84
if (!isTop) {
   this.setState({
      scrolled: true
   })
} else {
   this.setState({
      scrolled: false
   })
}
})
88%

See the [] as the second parameter for useEffect? That’s telling React to only add the listener when the Header component is mounted.,You probably all know the effect of a page’s header shrinking in size or turning opaque when scrolling down a bit. With React Hooks it’s very easy and quick to pull off.,TL;DR: Using the useEffect Hook with a scroll listener enables us to apply a css class to a component based on the scroll’s pageYOffset.

Pretag
 Pretag team - issue, fix, solve, resolve
72%

When dealing with hooks, and hooks that will depend on cleanup or hook dependencies it is best practice to create the function inside the useEffect hook.

Pretag
 Pretag team - issue, fix, solve, resolve
65%

If we need better support we will need one parent component to scroll and one child that will stick also and a CSS file.,We need to get component's reference to track its position relative to the browser's window we. If we get the ref directly, the browser will show a console error such as:,In the parent component we have isSticky variable which will show if the component is sticky or not. We control its state with useState Hook.

.sticky {
   position: sticky;
   top: 0;
   z - index: 100; /* this is optional and should be different for every project */
}
load more v
75%

Have you ever seen one of those fixed (or “sticky’) header bars that disappear when you begin scrolling down the page, then reappear whenever you start to scroll back up? In this exercise, we’ll learn how to build our own using a bit of JavaScript. ,A sticky header that disappears from view when not needed (ie: when the user is scrolling to see more content) is an excellent compromise.,That’s it, folks! During this exercise, we learned how to toggle a sticky header’s visibility depending on the scrolling direction.

Here’s the page markup:

<header class="page-header">
   <nav>
      <div class="trigger-menu-wrapper">
         <button class="trigger-menu">
            <svg width="20" height="20" viewBox="0 0 24 24">
               <path d="M24 10h-10v-10h-4v10h-10v4h10v10h4v-10h10z" />
            </svg>
            <span>MENU</span>
         </button>
      </div>
      <ul class="menu">...</ul>
   </nav>
</header>

<a href="" role="button" aria-label="Toggle menu" class="lottie-wrapper">
   <lottie-player src="https://assets10.lottiefiles.com/datafiles/9gIwZ2uiiKglyb0/data.json" style="width: 60px; height: 60px;"></lottie-player>
</a>

<main class="page-main">
   <section>...</section>
   <section>...</section>
   <section>...</section>
</main>
load more v
40%

The value of state colorChange decides the color of our navbar with the help of a conditional operator. When our state’s value is false, it assigns a CSS class of ‘navbar’ to our Navbar component which provides it a background-color of transparent. When we scroll equal to or more than the height of our navbar (80px), the value of state colorChange becomes true, and it assigns a different CSS class of ‘navbar colorChange’ to our Navbar component which provides it a background color of #000. We will define both these CSS classes in our App.css file.,Output: See how navbar changes its color to black on scrolling down and becomes transparent again on returning to the top.,Now create the components folder in src then go to the components folder and create two files Navbar.js and NavbarStyles.js. 

Basic Setup: You will start a new project using create-react-app so open your terminal and type:

npx create - react - app navbar - color - change

Now go to your navbar-color-change folder by typing the given command in the terminal:

cd navbar - color - change
npm install--save styled - components
npm install--save react - icons

Step to Run Application: Run the application using the following command from the root directory of the project:

npm start
load more v
22%

Recently, I've been working on improving the UI of a previous project. One cool thing I've learned is changing the style of the navbar when the user scrolls.,Also have componentWillUnmount to remove the event listener when the component is going to be removed from the DOM.,Added an event listener to the window object to watch for when a user scrolls down from the top of the website.

  componentDidMount() {
     window.addEventListener("scroll", this.handleScroll);
  }

  componentWillUnmount() {
     window.removeEventListener("scroll", this.handleScroll);
  }

  handleScroll = () => {
     if (window.scrollY > 20) {
        document.querySelector(".navbar").className = "navbar 
        scroll ";
     } else {
        document.querySelector(".navbar").className = "navbar";
     }
  };
load more v
60%

In this tutorial, let's explore a way to create a header view component that animates on the scroll position of the ScrollView component from React Native. We will go through the basics of creating a new Animated value as well as explaining the significance of functions and properties like interpolation, extrapolate, contentOffset, and so on.,Now, let's add an Animated.View to render from this component. It is going to use position: absolute to help cover the background behind the status bar as well as the same color as the whole header.,The last step in this section is to create a new component file called AnimatedHeader.js inside the components/ directory. For now, it is going to return nothing.

Pretag
 Pretag team - issue, fix, solve, resolve
48%

Scrolling is defined as sliding-effect movement on images, text, or graphics across the computer display screen horizontally, vertically, or both. When developing web pages, you can enable scrolling by default for the complete webpage or only the areas where it is required.,Continuing the previous example: After reading all the information, you can exit the web page by clicking the Exit button. This opens up a dialog box that shows a goodbye message. While the pop-up is present on the screen, make sure that the scroll bar behind the webpage is disabled. Below is the code for creating the button and popup:,Single-direction scrolling can be applied when the scroll movement is either horizontal or vertical.

1

<body>
   2 <div id=”menu”></div>
   3</body>
load more v

Other "header-style" queries related to "Change style of header component on scroll on home page only in React.Js"