add a className

[isaacalves]

is it possible to add a class to the Sticky element when the element's stickiness is activated?

[martinbroos]

you can do this by checking the isSticky variable. The way i'm doing this is with https://github.com/JedWatson/classnames

<Sticky {...stickyProps}>
  {({ style, isSticky }) => {
    var className = classNameFactory("article-header", {
      "article-header--sticky": isSticky
    });

    return (
      <div>
        <section className={className} style={style}>
          {this.props.children}
        </section>
      </div>
    );
  }}
</Sticky>;

[alxvallejo]

What is { ...stickyProps } ? I don't see that in the documentation...

[vcarl]

That appears to be code from @martinbroos' code, not the library. It's not related to how to apply a className to an element when it's sticky.

[vcarl]

I formatted his snippet with Prettier, here it is without some of the intermediate values and unnecessary props.

<Sticky>
  {({ style, isSticky }) => (
    <div>
      <section
        className={classNames("article-header", {
          "article-header--sticky": isSticky
        })}
        style={style}
      >
        {this.props.children}
      </section>
    </div>
  )}
</Sticky>;