CODEWITHSUNDEEP
reactjs
Jack
Jack

Reputation: 5870

How to keep the other component stay on the top position when InfiniteScroll scroll down in reactjs

I'm using InfiniteScroll to implement the content scrolling, but I hope that the Reset and Create buttons kept on the top when I scroll down the scrolls, i.e when I scrolled down multiple pages, I could not see the Reset and Create buttons. My code as following please:

<div >
  <Button aligh="right" style={{float:"right"}}  variant="contained" onClick={this.reset}>Reset</Button>
  <Button aligh="right" style={{float:"right"}}  variant="contained" onClick={this.create}>Create</Button>
   <table id="customers">
    <InfiniteScroll
        dataLength={lengthScroll}
        next={this.fetchData}
        hasMore={true}
        scrollThreshold='0'
      >
        <thead>
          <tr>
              <th>ID</th> <th>Name</th> <th>Title</th>
          </tr>
                    </thead>
          <tbody >
              {users.map((record, index) => {
                  return (<td>{record.id}</td><td>{record.name}</td><td>{record.title}</td>)
                  })
              }    
          </tbody>
      </InfiniteScroll>
  </table>

</div>

Upvotes: 0

Views: 93

Answers (1)

HolyMoly
HolyMoly

Reputation: 2080

you are going to want to write a little logic around those elements (you may want to wrap them in a single parent wrapper and do the logic around that one parent element)

1) you will need an event listener on the window.scroll event - that should have a callback function that checks where the top of the elements (or the single parent wrapper) you want to stick to the top are, and when they have a top or offsetTop (i forget what it is called) of 0 ...

2) you then want to in your css make that element position: sticky

The easiest way to do it as far as the css is rather than modifying the existing css of the elements create a new class that handles the stickiness that you add and remove conditionally in the render. Let's say the class will be called sticky

3) once you get that going you can play around with the logic of unsticking it, basically look for the offsetTop > 0 and remove the sticky. ...when something is supposed to be sticky you can setState({isStuck: true}) or something and toggle that to use as the basis for your conditional on the class being attached and removed ie: className={`regular-class ${isStuck ? 'sticky': ''}`}

Don't forget to remove the event listener when the component unmounts to avoid memory leaks ;)

additionally, you can add some additional logic to avoid setting state at every pixel of scrolling (you can figure out that bit but generally you check what the current state is and if it needs to be updated...don't just set state at every pixel (offsetTop change unless it was not at 0 and now is or vice-versa)

worth noting that once you get this down, you can make it super generic so that you can reuse it with however many elements you like around the app ;)

Upvotes: 1

Related Questions