I want to apply sticky to vertical and horizontal scrolling.

[sin-to-jin]

For example, with code like sample code, in a section such as a table, you can fix the header row when scrolling horizontally. Then, when you scroll vertically, can you make the header row follow (sticky) ?

Of course, I can use js to get the value when the scroll position changes and control the header using transform, ect., but I don't want to handle self-code if possible. thanks.

If there is no such feature in this library, I will try to change the UI in js, but if there is, I would appreciate it if you could let me know.

[redonkulus]

I haven't tried this myself, you can certainly try it and see what functionality is missing

[sin-to-jin]

import React from 'react';
import { ReactElement } from 'react';
import Sticky from 'react-stickynode';

const Test = (): ReactElement => {
  return (
    <div style={{ overflow: 'hidden', marginTop: '100px' }}>
      <Sticky className="navbar sections">
        <h1 style={{ fontSize: '60px', marginBottom: '60px' }}>Nav</h1>
      </Sticky>
      <h2 style={{ fontSize: '30px' }}>Hello, World</h2>

      <div style={{ overflowX: 'auto' }}>
        <Sticky className="header sections">
          {[...Array(8)].map((_, i) => {
            return (
              <Sticky key={i}>
                <div
                  style={{
                    display: 'flex',
                    flexDirection: 'row',
                    fontSize: '25px',
                    background: 'red',
                  }}
                >
                  <div>{`Header: ${i}`}</div>
                </div>
              </Sticky>
            );
          })}
        </Sticky>

        <div
          style={{
            display: 'flex',
            flexDirection: 'column',
            fontSize: '25px',
          }}
        >
          {[...Array(100)].map((_, i2) => {
            return (
              <div key={`row-${i2}`} style={{ display: 'flex' }}>
                {[...Array(8)].map((_, i) => {
                  return i === 0 || i === 1 ? (
                    <Sticky key={i2} className="data sections">
                      <div key={i}>{`Content: ${i2} / ${i}`}</div>
                    </Sticky>
                  ) : (
                    <div key={i}>{`Content: ${i2} / ${i}`}</div>
                  );
                })}
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
};

export default Test;

The navbar and header sections were followed by vertical scrolling. However, the sticky in the data sections did not respond to horizontal scrolling.