A sticky view with scroll listener API for parallax style views.
- Getting started
- Basic usage
- Adjusting pages and factor usage
- Using listeners
- Using CSS variables
- Using ClassNames
- Using the hook
- Advanced usage
- Why we don't use States
- Typescript
- Testing
Please install stickyroll and react. Stickyroll does not have any additional dependencies.
With NPM
npm install @stickyroll/react react react-domWith Yarn
yarn add @stickyroll/react react react-domimport Stickyroll from "@stickyroll/react/stickyroll";
export default function App() {
return <Stickyroll pages={1}>Scroll here.</Stickyroll>;
}import Stickyroll from "@stickyroll/react/stickyroll";
export default function App() {
return (
// Uses 10 pages of 300vh each
<Stickyroll pages={10} factor={3}>
Scroll here.
</Stickyroll>
);
}import Stickyroll from "@stickyroll/react/stickyroll";
export default function App() {
return (
<Stickyroll
pages={1}
onStart={() => {
console.log("onStart");
}}
onPage={(page, index) => {
console.log("onPage", page, index);
}}
onProgress={(progress, page, index) => {
console.log("onProgress", progress, page, index);
}}
onEnd={() => {
console.log("onEnd");
}}
>
Scroll here.
</Stickyroll>
);
}- height:
CSS_VARS.height - pages:
CSS_VARS.pages - factor:
CSS_VARS.factor - progress:
CSS_VARS.progress - page:
CSS_VARS.page
import Stickyroll from "@stickyroll/react/stickyroll";
import { CSS_VARS } from "@stickyroll/react/constants";
export default function App() {
return (
<Stickyroll pages={1}>
<div
style={{
height: 10,
background: "red",
transform: `scaleX(var(${CSS_VARS.progress}, 0))`,
}}
/>
</Stickyroll>
);
}- root:
CLASS_NAMES.root - above:
CLASS_NAMES.above - below:
CLASS_NAMES.below - sticky:
CLASS_NAMES.sticky - nonSticky:
CLASS_NAMES.nonSticky - page:
CLASS_NAMES.page(type: function)
import styled from "@emotion/styled";
import Stickyroll from "@stickyroll/react/stickyroll";
import { CLASS_NAMES } from "@stickyroll/react/constants";
const StyledComponent = styled.div`
height: 10px;
background: red;
/* Active while in sticky mode */
&.${CLASS_NAMES.sticky} {
background: yellow;
}
/* Active before sticky mode */
&.${CLASS_NAMES.above} {
background: blue;
}
/* Active after sticky mode */
&.${CLASS_NAMES.below} {
background: hotpink;
}
/* Active while on page 0 (index) */
&.${CLASS_NAMES.page(0)} {
background: rebeccapurple;
}
`;
export default function App() {
return (
<Stickyroll pages={1}>
<StyledComponent />
</Stickyroll>
);
}import { CSS_VARS, STYLE } from "@stickyroll/react/constants";
import useStickyroll from "@stickyroll/react/use-stickyroll";
import { useRef } from "react";
export default function App() {
const ref = useRef();
useStickyroll(ref, { pages: 1 });
return (
<div
ref={ref}
style={{
height: `var(${CSS_VARS.height}, var(--100vh, 100vh))`,
}}
>
<div style={STYLE}>Scroll here.</div>
</div>
);
}You can provide your own styles and behavior to adjust stickyroll to your needs. Take a look at the examples:
While you can write the output of stickyroll to a state we recommend to work without states, to optimize performance.
You can access the ref (see the example) and modify the styles and additional behavior from there.
If you still need a state, we recommend using a global state that can then be accessed in child components to prevent re-rendering the top level component.
You can take a look at these state management libraries or use your own preferred library:
Stickyroll provides types and is fully typed. Use them, don't use them… if you ever need them, we've got you covered.
We test stickyroll in real browsers with real interactions to ensure full coverage and reliability of this library.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent