Last active
August 24, 2019 19:07
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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