Enhance design based on scrolling function in React

Question

Enhance design based on scrolling function in React

I've been trying to update the color of my header when a user scrolls the page, but for some reason, my onScroll method isn't working. Can anyone help me figure out why and how to solve this issue? The onScroll method is triggered by the bottom TemplateWrapper component. And if you have any alternative suggestions on how to achieve this effect, I'm open to them! Thank you!

const headerStyle = {
      background: 'grey',
      marginBottom: '1.45rem',
      position: 'fixed',
      top: 0,
      left: 0,
      width: '100%',
      zIndex: '99'
}

const modHeader = () => {
  headerStyle.background = 'white'
  console.log('scroll')
}

const Header = () => (

  <div className='header'
    style={headerStyle}
  >
    <div
      style={{
        margin: '0 auto',
        maxWidth: 1160,
        padding: '1.45rem 1.0875rem',
        display: 'flex',
        flexDirection: 'row',
        justifyContent: 'space-between'
      }}
    >
      <h1 style={{ margin: 0 }}>
        <Link
            to="/"
            style={{
              color: 'white',
              textDecoration: 'none',
            }}
          >
            Gatsby
        </Link>
      </h1>
      <h2 style={{ margin: 0 }}>  
        <Link
          to="/about"
          style={{
            color: 'white',
            textDecoration: 'none',
          }}
        >
          About
        </Link>
      </h2>
    </div>
  </div>
)

const TemplateWrapper = ({
  children
}) => (
    <div onScroll={modHeader}>
      <Helmet
        title="Gatsby Default Starter"
        meta={[
          { name: 'description', content: 'Sample' },
          { name: 'keywords', content: 'sample, something' },
        ]}
      />
      <Header />
      <div 
        style={{
          margin: '0 auto',
          maxWidth: 960,
          padding: '0px 1.0875rem 1.45rem',
          paddingTop: 0,
        }}
      >
        {children()}
      </div>
    </div>
  )

export default TemplateWrapper

javascript css reactjs gatsby

Answer 1

Answer №1

To capture scroll events and update your component, you must add an event listener in the componentDidMount lifecycle method and store the value in the state:

componentDidMount = () => {
   window.addEventListener('scroll', ()=>{
     this.setState({
       // Add your flags here
      });
    });
   };

Note: If you need to attach an event listener to a specific div element in React, you can do so by using refs:

componentDidMount = () => {
   this.listener.addEventListener('scroll', ()=>{
     this.setState({
       // Add your flags here
      });
    });
   };
render(){
   return( 
       <div ref={(listener) => { this.listener = listener }}></div>
    )
 }

Answer 2

To capture scroll events and update your component, you must add an event listener in the componentDidMount lifecycle method and store the value in the state:

componentDidMount = () => {
   window.addEventListener('scroll', ()=>{
     this.setState({
       // Add your flags here
      });
    });
   };

Note: If you need to attach an event listener to a specific div element in React, you can do so by using refs:

componentDidMount = () => {
   this.listener.addEventListener('scroll', ()=>{
     this.setState({
       // Add your flags here
      });
    });
   };
render(){
   return( 
       <div ref={(listener) => { this.listener = listener }}></div>
    )
 }

Enhance design based on scrolling function in React

Answer №1

Similar questions

React Application - The division is positioned centrally when run on local host, however, it does not retain its center alignment

React callbacks involve the interaction between three different components

Tips on how to center an image within a table cell:1. Insert the image

Encountering weathers.map is not a function error while using React.js with OpenWeatherMap integration

Calculate the cumulative values in ng-repeat using AngularJS

Using React and Redux to update the state of an object with the current state

Sending an AJAX request to a REST service in order to submit the information captured in an HTML form

Struggling with creating an html file that is responsive on mobile devices

Applying Bootstrap classes to adjust font weight

How can I alter the background color while performing a transformation in JS/CSS?

What could be causing an error with NextJS's getStaticPaths when running next build?

Angular directive that verifies the presence of a specific number of child li elements

Navigating with jQuery Scrollbars

Building a table from JSON using only JavaScript.orGenerate a

Is it possible to refresh data efficiently using web scraping tools, similar to how it

JavaScript function for automatic scrolling to the bottom of the page is not functioning as expected

The parent div isn't properly extending to accommodate the table, and the columns aren't aligning correctly within the table when using CSS flexbox

Difficulty in defining the header while using the submit hook in Remix 1.15

Ensure that at least one mandatory field is implemented with React final form

Creating JavaScript Powered Pie Charts