Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
function App() {
// 5️⃣ Event handlers for "un/stuck" events
// "type" is either "stuck" or "unstuck"
// while the "target" is the DOM element, on which the un/stuck event happened.
// Use this to make changes to the style or do any manipulations you want to do
const handleChange = ({ target, type }) => {
if (type === "stuck") {
target.style.backgroundColor = "#4caf50";
target.style.boxShadow =
"0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12), 0 3px 5px -1px rgba(0, 0, 0, 0.4)";
} else {
target.style.backgroundColor = "rebeccapurple";
target.style.boxShadow = "";
}
};
// Or handle each change individually
const handleStuck = target => {
// target.style.backgroundColor = '#4caf50'
// target.style.boxShadow =
// '0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12), 0 3px 5px -1px rgba(0, 0, 0, 0.4)'
};
const handleUnstuck = target => {
// target.style.backgroundColor = 'rebeccapurple'
// target.style.boxShadow = ''
};
const stickySectionElements = Array.from({ length: 3 }, (_, i) => i + 1).map(
key => (
// 2️⃣ Specify the boundary, in which sticky component should be placed under.
<StickyBoundary key={key}
3️⃣ Here, you can observe the un/stuck events. "onChange" occurs for both "un/stuck" events.
onStuck={handleStuck}
onUnstuck={handleUnstuck}
onChange={handleChange}
>
4️⃣ Make this element "sticky" and render it as <h1 /> (default is <div />)
<Sticky id={key} as="h1">
Sticky Header {key}
</Sticky>
<h3>{key} -- Some content under the sticky header</h3>
<article>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi
...
</article>
</StickyBoundary>
)
);
return (
<div className="App">
1️⃣ Specify the Viewport to observe and render it as <main /> (defualt is <div />)
<StickyViewport as="main">
{stickySectionElements}
</StickyViewport>
</div>
);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.