Sticky behaves differently with this code

[c0debreaker]

This is the basic example I copied. I was playing with the code to figure out how it works. However, I hardcoded the background style in the Header and the sticky didn't behave as expected anymore. Why is it doing that?

import React, { PureComponent } from "react";
import ReactDOM from "react-dom";

import { Sticky, StickyContainer } from "../../src";
import { Header } from "../header";

let renderCount = 0;
export class Basic extends PureComponent {
  render() {
    return (
      <div>
        <h2>Content before the Sticky...</h2>
        <div
          className="gap short"
          style={{ background: "linear-gradient(#fff, #ddd)" }}
        />
        <StickyContainer className="container">
          <Sticky>
            {({ style }) => (
              <Header style={{ background: "linear-gradient(#fff, #ddd)"}} renderCount={renderCount++} />
            )}
          </Sticky>

          <h2 className="text-center">{"<StickyContainer />"}</h2>
        </StickyContainer>
        <div
          className="gap tall"
          style={{ background: "linear-gradient(#ddd, #fff)" }}
        >
          <h2>Content after the Sticky...</h2>
        </div>
      </div>
    );
  }
}

[vcarl]

Hi @c0debreaker! You're not using the style parameter being passed into the function child of <Sticky>.

{({ style }) => (
 <Header style={{ background: "linear-gradient(#fff, #ddd)"}}

Without that style parameter, it won't be sticky.

[c0debreaker]

Got it. I also found out that style value from the parameter was

style {transform: "translateZ(0)"}

Thanks!