Improve documentation for instances of fixed z-index elements

[JacobDFrank]

Improve documentation for instances of fixed z-index elements in which the top or the bottom of the page. The page could have a navigation bar, etc.

An example of mine that I'd like to write documentation on

<div className={classnames('boundary-element', styles.boundaryElement_positioning)}></div>
        <Header pageName='schedule' />
        <div className={'container'}>
          <div className={''} style={{ overflow: 'scroll' }}>
            <Sticky
              hideOnBoundaryHit={false}
              boundaryElement=".boundary-element"
              bottomOffset={0}
              topOffset={-120}
              stickyStyle={{ transform: 'translateY(120px)' }}
            >
              <div className={'flex gridish-container--complete flex-justify-center '}>
                <MediaQuery minWidth={481}>
                  <a className={styles.button_schedule} href="#friday">friday</a>
                  <a className={classnames(styles.button_schedule, styles.button_schedule__leftSpacing)} href="#saturday">saturday</a>
                  <a className={classnames(styles.button_schedule, styles.button_schedule__leftSpacing)} href="#sunday">sunday</a>
                </MediaQuery>
                <MediaQuery maxWidth={480}>
                  <a className={styles.button_schedule} href="#friday">fri</a>
                  <a className={classnames(styles.button_schedule, styles.button_schedule__leftSpacing)} href="#saturday">sat</a>
                  <a className={classnames(styles.button_schedule, styles.button_schedule__leftSpacing)} href="#sunday">sun</a>
                </MediaQuery>
              </div>
            </Sticky>
          </div>

[seancorgan]

➕

[alex84G]

@JacobDFrank your example configuration of the sticky component helped me a lot.

Thank you!

[kahlan88]

I think: "Improve documentation" would be more applicable. I love this package, but have to look into the source code to work out what is what (i.e. boundaryElement).

In your example, @JacobDFrank, what styles do you have set on boundaryElement_positioning? I'm struggling with z-indices and would appreciate if you could help. Also: great idea about adding to the documentation!

[gm0t]

hey @kahlan88 , not sure what is your issue, could you please create an example somewhere? (for example, feel free to fork this example - https://codesandbox.io/s/react-sticky-el-example-fn0ev )

[kahlan88]

hey @kahlan88 , not sure what is your issue, could you please create an example somewhere? (for example, feel free to fork this example - https://codesandbox.io/s/react-sticky-el-example-fn0ev )

Thanks, I worked it out based on this issue and by looking at the source code.

I think boundaryElement needs slightly more info than just that it's a ancestor element for example.