Example

├── examples ├── legacy-browsers.ts ├── index.html ├── legacy-browsers.html ├── styles.css └── index.tsx ├── .gitignore ├── .prettierrc ├── .travis.yml ├── tsconfig.test.json ├── lib ├── index.ts ├── __tests__ │ ├── browser.test.tsx │ └── server.test.tsx ├── utils.ts ├── StickyElement.tsx ├── ElementResizeObserver.tsx ├── types.ts ├── globals.d.ts ├── StickyProvider.tsx ├── StickyPlaceholder.tsx ├── StickyScrollUp.tsx └── Sticky.tsx ├── .editorconfig ├── .npmignore ├── jest.config.js ├── tslint.json ├── docs ├── index.html ├── legacy-browsers.html ├── examples.68d19066.css ├── legacy-browsers.68d19066.css ├── examples.68d19066.css.map └── legacy-browsers.68d19066.css.map ├── rollup.config.js ├── tsconfig.json ├── LICENSE ├── package.json └── README.md /examples/legacy-browsers.ts: -------------------------------------------------------------------------------- 1 | import 'core-js/stable'; 2 | import './index'; 3 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | examples-dist/ 3 | dist/ 4 | .cache/ 5 | coverage/ 6 | .rpt2_cache/ 7 | .vscode/ 8 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "parser": "typescript", 3 | "trailingComma": "all", 4 | "singleQuote": true 5 | } 6 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | matrix: 3 | include: 4 | - node_js: "14" 5 | - node_js: "12" 6 | - node_js: "10" 7 | 8 | script: "npm test -- --no-cache" 9 | -------------------------------------------------------------------------------- /tsconfig.test.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "module": "commonjs", 5 | "jsx": "react", 6 | "esModuleInterop": true 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /lib/index.ts: -------------------------------------------------------------------------------- 1 | export { default as StickyProvider } from './StickyProvider'; 2 | export { default as Sticky } from './Sticky'; 3 | export { default as StickyScrollUp } from './StickyScrollUp'; 4 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | end_of_line = lf 5 | insert_final_newline = true 6 | charset = utf-8 7 | indent_style = space 8 | indent_size = 2 9 | trim_trailing_whitespace = true 10 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | lib/ 2 | examples/ 3 | node_modules/ 4 | examples-dist/ 5 | .vscode/ 6 | docs/ 7 | .cache/ 8 | coverage/ 9 | .rpt2_cache/ 10 | .editorconfig 11 | .prettierrc 12 | rollup.config.js 13 | tsconfig.json 14 | tsconfig.test.json 15 | tslint.json 16 | .travis.yml 17 | -------------------------------------------------------------------------------- /examples/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Example 7 | 8 | 9 |

10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /jest.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | moduleFileExtensions: ['ts', 'tsx', 'js'], 3 | testMatch: ['/lib/**/__tests__/*.test.+(ts|tsx|js)'], 4 | preset: 'ts-jest', 5 | globals: { 6 | 'ts-jest': { 7 | tsconfig: './tsconfig.test.json', 8 | diagnostics: { 9 | warnOnly: true, 10 | }, 11 | }, 12 | }, 13 | }; 14 | -------------------------------------------------------------------------------- /tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ["tslint:recommended", "tslint-react", "tslint-config-prettier"], 3 | "rules": { 4 | "max-classes-per-file": false, 5 | "jsx-no-lambda": false, 6 | "no-console": false, 7 | "object-literal-sort-keys": false 8 | }, 9 | "linterOptions": { 10 | "exclude": [ 11 | "node_modules/**/*.ts" 12 | ] 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /examples/legacy-browsers.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Example 7 | 8 | 9 |

10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /docs/index.html: -------------------------------------------------------------------------------- 1 | Example

-------------------------------------------------------------------------------- /docs/legacy-browsers.html: -------------------------------------------------------------------------------- 1 | Example

-------------------------------------------------------------------------------- /rollup.config.js: -------------------------------------------------------------------------------- 1 | import typescript from 'rollup-plugin-typescript2'; 2 | import pkg from './package.json'; 3 | export default { 4 | input: 'lib/index.ts', 5 | output: [ 6 | { 7 | file: pkg.main, 8 | format: 'cjs', 9 | sourcemap: true, 10 | }, 11 | { 12 | file: pkg.module, 13 | format: 'es', 14 | sourcemap: true, 15 | }, 16 | ], 17 | external: [ 18 | ...Object.keys(pkg.dependencies || {}), 19 | ...Object.keys(pkg.peerDependencies || {}), 20 | ], 21 | plugins: [ 22 | typescript({ 23 | typescript: require('typescript'), 24 | }), 25 | ], 26 | }; 27 | -------------------------------------------------------------------------------- /lib/__tests__/browser.test.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import * as ReactDOM from 'react-dom'; 3 | import { StickyScrollUp, Sticky, StickyProvider } from '../index'; 4 | 5 | describe('browser rendering', () => { 6 | it('renders without crashing', () => { 7 | const div = document.createElement('div'); 8 | ReactDOM.render( 9 | 10 | 11 |

12 | 13 | 14 |

15 | 16 | , 17 | div, 18 | ); 19 | ReactDOM.unmountComponentAtNode(div); 20 | }); 21 | }); 22 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "declaration": true, 4 | "declarationDir": "./dist", 5 | "module": "es6", 6 | "outDir": "./dist", 7 | "target": "es5", 8 | "lib": ["es6", "dom"], 9 | "sourceMap": true, 10 | "jsx": "react", 11 | "forceConsistentCasingInFileNames": true, 12 | "noImplicitReturns": true, 13 | "noImplicitThis": true, 14 | "noImplicitAny": true, 15 | "suppressImplicitAnyIndexErrors": true, 16 | "noUnusedLocals": true, 17 | "allowSyntheticDefaultImports": true, 18 | "moduleResolution": "Node" 19 | }, 20 | "include": [ 21 | "lib/**/*" 22 | ], 23 | "exclude": [ 24 | "dist", 25 | "examples-dist", 26 | ".cache" 27 | ] 28 | } 29 | -------------------------------------------------------------------------------- /lib/__tests__/server.test.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * @jest-environment node 3 | */ 4 | import * as React from 'react'; 5 | import ReactDOMServer from 'react-dom/server'; 6 | import { StickyScrollUp, Sticky, StickyProvider } from '../index'; 7 | 8 | describe('server side rendering', () => { 9 | const render = () => { 10 | return ReactDOMServer.renderToString( 11 | 12 | 13 |

14 | 15 | 16 |

17 | 18 | , 19 | ); 20 | }; 21 | 22 | it('should not throw', () => { 23 | expect(render).not.toThrow(); 24 | }); 25 | 26 | it('should render components as if they would have been disabled', () => { 27 | expect(render()).toBe( 28 | '

', 29 | ); 30 | }); 31 | }); 32 | -------------------------------------------------------------------------------- /lib/utils.ts: -------------------------------------------------------------------------------- 1 | import { IPositionStyles } from './types'; 2 | 3 | export const supportsWillChange = (() => { 4 | const isBrowser = 5 | typeof window !== 'undefined' && 6 | typeof document !== 'undefined' && 7 | document.documentElement; 8 | if (!isBrowser) { 9 | return false; 10 | } 11 | return 'willChange' in document.documentElement.style; 12 | })(); 13 | 14 | export const supportsPositionSticky = (() => { 15 | const isBrowser = typeof window !== 'undefined' && typeof CSS !== 'undefined'; 16 | if (!isBrowser) { 17 | return false; 18 | } 19 | return CSS.supports ? CSS.supports('position: sticky') : false; 20 | })(); 21 | 22 | export const shallowEqualPositionStyles = ( 23 | a: IPositionStyles, 24 | b: IPositionStyles, 25 | ) => { 26 | if (a === b) { 27 | return true; 28 | } 29 | if (a.position !== b.position) { 30 | return false; 31 | } 32 | if (a.top !== b.top) { 33 | return false; 34 | } 35 | if (a.transform !== b.transform) { 36 | return false; 37 | } 38 | if (a.willChange !== b.willChange) { 39 | return false; 40 | } 41 | return true; 42 | }; 43 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 Jannick Garthen 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /lib/StickyElement.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { TRenderChildren, IPositionStyles } from './types'; 3 | 4 | interface IProps { 5 | disabled: boolean; 6 | renderArgs?: R; 7 | children: TRenderChildren; 8 | forwardRef?: React.RefObject; 9 | style?: React.CSSProperties; 10 | positionStyle?: IPositionStyles; 11 | } 12 | 13 | const baseStyles: React.CSSProperties = { 14 | width: 'inherit', 15 | }; 16 | 17 | const prefixTransform = (transform: string): React.CSSProperties => ({ 18 | transform, 19 | WebkitTransform: transform, 20 | msTransform: transform, 21 | OTransform: transform, 22 | }); 23 | 24 | const StickyElement = ({ 25 | children, 26 | forwardRef, 27 | style: overrideStyles = {}, 28 | positionStyle = {}, 29 | disabled, 30 | renderArgs, 31 | ...props 32 | }: IProps) => { 33 | const style: React.CSSProperties = !disabled 34 | ? { ...baseStyles, ...positionStyle, ...overrideStyles } 35 | : {}; 36 | 37 | if (style.transform) { 38 | Object.assign(style, prefixTransform(style.transform)); 39 | } 40 | 41 | return ( 42 |

43 | {typeof children === 'function' 44 | ? (children as (options: R) => React.ReactNode)(renderArgs) 45 | : children} 46 |

47 | ); 48 | }; 49 | 50 | export default StickyElement; 51 | -------------------------------------------------------------------------------- /lib/ElementResizeObserver.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { IRect } from 'react-viewport-utils'; 3 | 4 | interface IElementResizeObserverProps { 5 | stickyRef: React.RefObject; 6 | onUpdate: (rect: IRect) => void; 7 | } 8 | 9 | class ElementResizeObserver extends React.PureComponent< 10 | IElementResizeObserverProps 11 | > { 12 | private resizeObserver: ResizeObserver | null; 13 | constructor(props: IElementResizeObserverProps) { 14 | super(props); 15 | this.resizeObserver = null; 16 | } 17 | 18 | componentDidMount() { 19 | this.resetObserver(); 20 | this.installObserver(); 21 | } 22 | 23 | componentDidUpdate() { 24 | this.resetObserver(); 25 | this.installObserver(); 26 | } 27 | 28 | componentWillUnmount() { 29 | this.resetObserver(); 30 | } 31 | 32 | installObserver() { 33 | if (!this.props.stickyRef.current) { 34 | return; 35 | } 36 | if (typeof window.ResizeObserver !== 'undefined') { 37 | this.resizeObserver = new window.ResizeObserver(entries => { 38 | if (entries && entries[0] && entries[0].contentRect) { 39 | this.props.onUpdate(entries[0].contentRect); 40 | } 41 | }); 42 | this.resizeObserver!.observe(this.props.stickyRef.current); 43 | } 44 | } 45 | 46 | resetObserver() { 47 | if (this.resizeObserver) { 48 | this.resizeObserver.disconnect(); 49 | this.resizeObserver = null; 50 | } 51 | } 52 | 53 | render(): null { 54 | return null; 55 | } 56 | } 57 | 58 | export default ElementResizeObserver; 59 | -------------------------------------------------------------------------------- /lib/types.ts: -------------------------------------------------------------------------------- 1 | export type TRenderChildren = 2 | | React.ReactNode 3 | | ((options: O) => React.ReactNode); 4 | 5 | export interface IStickyComponentProps { 6 | /** 7 | * By default css styles for hardware acceleration (`will-change` if supported, otherwise falls back to `transform`) are activated. This allows to turn it off. 8 | */ 9 | disableHardwareAcceleration?: boolean; 10 | /** 11 | * The components will resize when the width of the window changes to adjust its height and width. This allows to turn the resizing off. 12 | */ 13 | disableResizing?: boolean; 14 | /** 15 | * Allows to disable all sticky behavior. Use this in case you need to temporary disable the sticky behavior but you don't want to unmount it for performance reasons. 16 | */ 17 | disabled?: boolean; 18 | /** 19 | * All properties within this object are spread directly into the sticky element within the component. This e.g. allows to add css styles by `className` or `style`. 20 | */ 21 | stickyProps?: {}; 22 | /** 23 | * Will be merged with generated styles of the placeholder element. It also allows to override generated styles. 24 | */ 25 | style?: React.CSSProperties; 26 | /** 27 | * The class name is passed directly to the placeholder element. 28 | */ 29 | className?: string; 30 | } 31 | 32 | export interface IStickyInjectedProps { 33 | stickyOffset: { top: number; height: number }; 34 | updateStickyOffset: (offset: number, height: number) => void; 35 | } 36 | 37 | export interface IPositionStyles { 38 | position?: 'fixed' | 'absolute' | 'sticky'; 39 | transform?: string; 40 | top?: number; 41 | willChange?: string; 42 | } 43 | -------------------------------------------------------------------------------- /lib/globals.d.ts: -------------------------------------------------------------------------------- 1 | // @see https://gist.github.com/strothj/708afcf4f01dd04de8f49c92e88093c3 2 | interface Window { 3 | ResizeObserver: ResizeObserver; 4 | } 5 | 6 | /** 7 | * The ResizeObserver interface is used to observe changes to Element's content 8 | * rect. 9 | * 10 | * It is modeled after MutationObserver and IntersectionObserver. 11 | */ 12 | interface ResizeObserver { 13 | new (callback: ResizeObserverCallback): ResizeObserver; 14 | 15 | /** 16 | * Adds target to the list of observed elements. 17 | */ 18 | observe: (target: Element) => void; 19 | 20 | /** 21 | * Removes target from the list of observed elements. 22 | */ 23 | unobserve: (target: Element) => void; 24 | 25 | /** 26 | * Clears both the observationTargets and activeTargets lists. 27 | */ 28 | disconnect: () => void; 29 | } 30 | 31 | /** 32 | * This callback delivers ResizeObserver's notifications. It is invoked by a 33 | * broadcast active observations algorithm. 34 | */ 35 | interface ResizeObserverCallback { 36 | (entries: ResizeObserverEntry[], observer: ResizeObserver): void; 37 | } 38 | 39 | interface ResizeObserverEntry { 40 | /** 41 | * @param target The Element whose size has changed. 42 | */ 43 | new (target: Element): ResizeObserverEntry; 44 | 45 | /** 46 | * The Element whose size has changed. 47 | */ 48 | readonly target: Element; 49 | 50 | /** 51 | * Element's content rect when ResizeObserverCallback is invoked. 52 | */ 53 | readonly contentRect: DOMRectReadOnly; 54 | } 55 | 56 | interface DOMRectReadOnly { 57 | readonly x: number; 58 | readonly y: number; 59 | readonly width: number; 60 | readonly height: number; 61 | readonly top: number; 62 | readonly right: number; 63 | readonly bottom: number; 64 | readonly left: number; 65 | 66 | toJSON: () => any; 67 | } 68 | -------------------------------------------------------------------------------- /lib/StickyProvider.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { ViewportProvider } from 'react-viewport-utils'; 3 | 4 | import { IStickyInjectedProps } from './types'; 5 | 6 | const StickyGroupContext = React.createContext({ 7 | stickyOffset: { top: 0, height: 0 }, 8 | updateStickyOffset: (offset: number, height: number) => {}, 9 | }); 10 | 11 | export const connect = () =>

( 12 | WrappedComponent: React.ComponentType

, 13 | ) => { 14 | const ConnectedComponent: React.SFC

= props => ( 15 | 16 | {context => ( 17 | 22 | )} 23 | 24 | ); 25 | 26 | const displayName = 27 | WrappedComponent.displayName || WrappedComponent.name || 'Component'; 28 | ConnectedComponent.displayName = `connectSticky(${displayName})`; 29 | 30 | return ConnectedComponent; 31 | }; 32 | 33 | export default class StickyScrollUpProvider extends React.PureComponent { 34 | stickyOffset = { 35 | top: 0, 36 | height: 0, 37 | }; 38 | 39 | updateStickyOffset = (stickyOffset: number, height: number) => { 40 | this.stickyOffset.top = Math.min(stickyOffset, height); 41 | this.stickyOffset.height = height; 42 | }; 43 | 44 | render() { 45 | return ( 46 | 47 | 53 | {this.props.children} 54 | 55 | 56 | ); 57 | } 58 | } 59 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-stickup", 3 | "version": "1.12.1", 4 | "description": "React components to stick elements at the top of the page while scrolling", 5 | "main": "dist/index.js", 6 | "module": "dist/index.es.js", 7 | "typings": "dist/index.d.ts", 8 | "sideEffects": false, 9 | "scripts": { 10 | "start": "rm -rf ./.cache && parcel ./examples/index.html --out-dir='examples-dist'", 11 | "compile:docs": "rm -rf docs && parcel build ./examples/index.html ./examples/legacy-browsers.html --out-dir='docs' --public-url=\"https://garthenweb.github.io/react-stickup/\"", 12 | "precompile": "rm -rf dist", 13 | "compile": "rollup -c", 14 | "test": "jest --coverage", 15 | "fmt": "prettier --write \"lib/*.{ts,tsx}\" \"examples/*.{ts,tsx}\"", 16 | "prepublishOnly": "npm test && npm run compile", 17 | "postversion": "git push && git push --tags" 18 | }, 19 | "repository": { 20 | "type": "git", 21 | "url": "git://github.com/garthenweb/react-stickup" 22 | }, 23 | "bugs": { 24 | "url": "https://github.com/garthenweb/react-stickup/issues" 25 | }, 26 | "author": "Jannick Garthen ", 27 | "keywords": [ 28 | "react", 29 | "sticky", 30 | "header", 31 | "scroll" 32 | ], 33 | "license": "MIT", 34 | "engines": { 35 | "node": ">= 10.13.0" 36 | }, 37 | "devDependencies": { 38 | "@babel/preset-env": "^7.12.10", 39 | "@types/jest": "^26.0.19", 40 | "@types/node": "^14.14.13", 41 | "@types/react": "^17.0.0", 42 | "@types/react-dom": "^17.0.0", 43 | "core-js": "^3.8.1", 44 | "jest": "^25.5.4", 45 | "parcel-bundler": "^1.12.4", 46 | "prettier": "^2.2.1", 47 | "react": "^17.0.1", 48 | "react-dom": "^17.0.1", 49 | "rollup": "^2.34.2", 50 | "rollup-plugin-typescript2": "^0.29.0", 51 | "ts-jest": "^25.5.1", 52 | "typescript": "^4.1.3" 53 | }, 54 | "dependencies": { 55 | "react-viewport-utils": "^1.12.1" 56 | }, 57 | "peerDependencies": { 58 | "react": ">=16.3.0 <18.0.0" 59 | } 60 | } 61 | -------------------------------------------------------------------------------- /docs/examples.68d19066.css: -------------------------------------------------------------------------------- 1 | *{padding:0;margin:0;box-sizing:border-box}body{color:#333;font-size:20px;line-height:1.5;font-family:Arial,Helvetica,sans-serif;text-align:center}.scrollPosition{background:#cd5c5c;color:indigo;position:fixed;top:0;right:0;z-index:100}.header-container{z-index:1}.header{width:100%;background:#009fe3;padding:50px 30px;font-weight:700}.sticky-inline{width:100%;background:#ff8080;padding:30px}.sticky-inline-odd{background:#e6ff60}.sticky-inline-sidebar{overflow:hidden;height:1000px;background-color:#556;background-image:linear-gradient(30deg,#445 12%,transparent 12.5%,transparent 87%,#445 87.5%,#445),linear-gradient(150deg,#445 12%,transparent 12.5%,transparent 87%,#445 87.5%,#445),linear-gradient(30deg,#445 12%,transparent 12.5%,transparent 87%,#445 87.5%,#445),linear-gradient(150deg,#445 12%,transparent 12.5%,transparent 87%,#445 87.5%,#445),linear-gradient(60deg,#99a 25%,transparent 25.5%,transparent 75%,#99a 0,#99a),linear-gradient(60deg,#99a 25%,transparent 25.5%,transparent 75%,#99a 0,#99a);background-size:80px 140px;background-position:0 0,0 0,40px 70px,40px 70px,0 0,40px 70px}.sticky-placeholder{padding-bottom:100px}.placeholder{width:100%;height:2500px;border-bottom:5px solid #333;color:#fff;background:linear-gradient(324deg,#fdfdfd 4%,transparent 0) -70px 43px,linear-gradient(36deg,#fdfdfd 4%,transparent 0) 30px 43px,linear-gradient(72deg,#e3d7bf 8.5%,transparent 0) 30px 43px,linear-gradient(288deg,#e3d7bf 8.5%,transparent 0) -70px 43px,linear-gradient(216deg,#e3d7bf 7.5%,transparent 0) -70px 23px,linear-gradient(144deg,#e3d7bf 7.5%,transparent 0) 30px 23px,linear-gradient(324deg,#fdfdfd 4%,transparent 0) -20px 93px,linear-gradient(36deg,#fdfdfd 4%,transparent 0) 80px 93px,linear-gradient(72deg,#e3d7bf 8.5%,transparent 0) 80px 93px,linear-gradient(288deg,#e3d7bf 8.5%,transparent 0) -20px 93px,linear-gradient(216deg,#e3d7bf 7.5%,transparent 0) -20px 73px,linear-gradient(144deg,#e3d7bf 7.5%,transparent 0) 80px 73px;background-color:#fdfdfd;background-size:100px 100px}.wrapper{margin:0 50px} 2 | /*# sourceMappingURL=https://garthenweb.github.io/react-stickup/examples.68d19066.css.map */ -------------------------------------------------------------------------------- /docs/legacy-browsers.68d19066.css: -------------------------------------------------------------------------------- 1 | *{padding:0;margin:0;box-sizing:border-box}body{color:#333;font-size:20px;line-height:1.5;font-family:Arial,Helvetica,sans-serif;text-align:center}.scrollPosition{background:#cd5c5c;color:indigo;position:fixed;top:0;right:0;z-index:100}.header-container{z-index:1}.header{width:100%;background:#009fe3;padding:50px 30px;font-weight:700}.sticky-inline{width:100%;background:#ff8080;padding:30px}.sticky-inline-odd{background:#e6ff60}.sticky-inline-sidebar{overflow:hidden;height:1000px;background-color:#556;background-image:linear-gradient(30deg,#445 12%,transparent 12.5%,transparent 87%,#445 87.5%,#445),linear-gradient(150deg,#445 12%,transparent 12.5%,transparent 87%,#445 87.5%,#445),linear-gradient(30deg,#445 12%,transparent 12.5%,transparent 87%,#445 87.5%,#445),linear-gradient(150deg,#445 12%,transparent 12.5%,transparent 87%,#445 87.5%,#445),linear-gradient(60deg,#99a 25%,transparent 25.5%,transparent 75%,#99a 0,#99a),linear-gradient(60deg,#99a 25%,transparent 25.5%,transparent 75%,#99a 0,#99a);background-size:80px 140px;background-position:0 0,0 0,40px 70px,40px 70px,0 0,40px 70px}.sticky-placeholder{padding-bottom:100px}.placeholder{width:100%;height:2500px;border-bottom:5px solid #333;color:#fff;background:linear-gradient(324deg,#fdfdfd 4%,transparent 0) -70px 43px,linear-gradient(36deg,#fdfdfd 4%,transparent 0) 30px 43px,linear-gradient(72deg,#e3d7bf 8.5%,transparent 0) 30px 43px,linear-gradient(288deg,#e3d7bf 8.5%,transparent 0) -70px 43px,linear-gradient(216deg,#e3d7bf 7.5%,transparent 0) -70px 23px,linear-gradient(144deg,#e3d7bf 7.5%,transparent 0) 30px 23px,linear-gradient(324deg,#fdfdfd 4%,transparent 0) -20px 93px,linear-gradient(36deg,#fdfdfd 4%,transparent 0) 80px 93px,linear-gradient(72deg,#e3d7bf 8.5%,transparent 0) 80px 93px,linear-gradient(288deg,#e3d7bf 8.5%,transparent 0) -20px 93px,linear-gradient(216deg,#e3d7bf 7.5%,transparent 0) -20px 73px,linear-gradient(144deg,#e3d7bf 7.5%,transparent 0) 80px 73px;background-color:#fdfdfd;background-size:100px 100px}.wrapper{margin:0 50px} 2 | /*# sourceMappingURL=https://garthenweb.github.io/react-stickup/legacy-browsers.68d19066.css.map */ -------------------------------------------------------------------------------- /examples/styles.css: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | color: #333; 9 | font-size: 20px; 10 | line-height: 1.5; 11 | font-family: Arial, Helvetica, sans-serif; 12 | text-align: center; 13 | } 14 | 15 | .scrollPosition { 16 | background: indianred; 17 | color: indigo; 18 | position: fixed; 19 | top: 0; 20 | right: 0; 21 | z-index: 100; 22 | } 23 | 24 | .header-container { 25 | z-index: 1; 26 | } 27 | 28 | .header { 29 | width: 100%; 30 | background: #009FE3; 31 | padding: 50px 30px; 32 | font-weight: bold; 33 | } 34 | 35 | .sticky-inline { 36 | width: 100%; 37 | background: #ff8080; 38 | padding: 30px; 39 | } 40 | 41 | .sticky-inline-odd { 42 | background: #e6ff60; 43 | } 44 | 45 | .sticky-inline-sidebar { 46 | overflow: hidden; 47 | height: 1000px; 48 | /* pattern from https://leaverou.github.io/css3patterns/#japanese-cube */ 49 | background-color:#556; 50 | background-image: linear-gradient(30deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445), 51 | linear-gradient(150deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445), 52 | linear-gradient(30deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445), 53 | linear-gradient(150deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445), 54 | linear-gradient(60deg, #99a 25%, transparent 25.5%, transparent 75%, #99a 75%, #99a), 55 | linear-gradient(60deg, #99a 25%, transparent 25.5%, transparent 75%, #99a 75%, #99a); 56 | background-size:80px 140px; 57 | background-position: 0 0, 0 0, 40px 70px, 40px 70px, 0 0, 40px 70px; 58 | } 59 | 60 | .sticky-placeholder { 61 | padding-bottom: 100px; 62 | } 63 | 64 | .placeholder { 65 | width: 100%; 66 | height: 2500px; 67 | border-bottom: 5px solid #333; 68 | color: #fff; 69 | /* pattern from http://lea.verou.me/css3patterns/#stars by Nicolas Gallagher */ 70 | background: 71 | linear-gradient(324deg, #fdfdfd 4%, transparent 4%) -70px 43px, 72 | linear-gradient( 36deg, #fdfdfd 4%, transparent 4%) 30px 43px, 73 | linear-gradient( 72deg, #e3d7bf 8.5%, transparent 8.5%) 30px 43px, 74 | linear-gradient(288deg, #e3d7bf 8.5%, transparent 8.5%) -70px 43px, 75 | linear-gradient(216deg, #e3d7bf 7.5%, transparent 7.5%) -70px 23px, 76 | linear-gradient(144deg, #e3d7bf 7.5%, transparent 7.5%) 30px 23px, 77 | 78 | linear-gradient(324deg, #fdfdfd 4%, transparent 4%) -20px 93px, 79 | linear-gradient( 36deg, #fdfdfd 4%, transparent 4%) 80px 93px, 80 | linear-gradient( 72deg, #e3d7bf 8.5%, transparent 8.5%) 80px 93px, 81 | linear-gradient(288deg, #e3d7bf 8.5%, transparent 8.5%) -20px 93px, 82 | linear-gradient(216deg, #e3d7bf 7.5%, transparent 7.5%) -20px 73px, 83 | linear-gradient(144deg, #e3d7bf 7.5%, transparent 7.5%) 80px 73px; 84 | background-color: #fdfdfd; 85 | background-size: 100px 100px; 86 | } 87 | 88 | .wrapper { 89 | margin: 0 50px; 90 | } 91 | -------------------------------------------------------------------------------- /docs/examples.68d19066.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["styles.css"],"names":[],"mappings":"AAAA,EACE,SAAU,CACV,QAAS,CACT,qBACF,CAEA,KACE,UAAW,CACX,cAAe,CACf,eAAgB,CAChB,sCAAyC,CACzC,iBACF,CAEA,gBACE,kBAAqB,CACrB,YAAa,CACb,cAAe,CACf,KAAM,CACN,OAAQ,CACR,WACF,CAEA,kBACE,SACF,CAEA,QACE,UAAW,CACX,kBAAmB,CACnB,iBAAkB,CAClB,eACF,CAEA,eACE,UAAW,CACX,kBAAmB,CACnB,YACF,CAEA,mBACE,kBACF,CAEA,uBACE,eAAgB,CAChB,aAAc,CAEd,qBAAqB,CACrB,sfAKoF,CACpF,0BAA0B,CAC1B,6DACF,CAEA,oBACE,oBACF,CAEA,aACE,UAAW,CACX,aAAc,CACd,4BAA6B,CAC7B,UAAW,CAEX,guBAamE,CACjE,wBAAyB,CACzB,2BACJ,CAEA,SACE,aACF","file":"examples.68d19066.css","sourceRoot":"../examples","sourcesContent":["* {\n padding: 0;\n margin: 0;\n box-sizing: border-box;\n}\n\nbody {\n color: #333;\n font-size: 20px;\n line-height: 1.5;\n font-family: Arial, Helvetica, sans-serif;\n text-align: center;\n}\n\n.scrollPosition {\n background: indianred;\n color: indigo;\n position: fixed;\n top: 0;\n right: 0;\n z-index: 100;\n}\n\n.header-container {\n z-index: 1;\n}\n\n.header {\n width: 100%;\n background: #009FE3;\n padding: 50px 30px;\n font-weight: bold;\n}\n\n.sticky-inline {\n width: 100%;\n background: #ff8080;\n padding: 30px;\n}\n\n.sticky-inline-odd {\n background: #e6ff60;\n}\n\n.sticky-inline-sidebar {\n overflow: hidden;\n height: 1000px;\n /* pattern from https://leaverou.github.io/css3patterns/#japanese-cube */\n background-color:#556;\n background-image: linear-gradient(30deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445),\n linear-gradient(150deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445),\n linear-gradient(30deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445),\n linear-gradient(150deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445),\n linear-gradient(60deg, #99a 25%, transparent 25.5%, transparent 75%, #99a 75%, #99a),\n linear-gradient(60deg, #99a 25%, transparent 25.5%, transparent 75%, #99a 75%, #99a);\n background-size:80px 140px;\n background-position: 0 0, 0 0, 40px 70px, 40px 70px, 0 0, 40px 70px;\n}\n\n.sticky-placeholder {\n padding-bottom: 100px;\n}\n\n.placeholder {\n width: 100%;\n height: 2500px;\n border-bottom: 5px solid #333;\n color: #fff;\n /* pattern from http://lea.verou.me/css3patterns/#stars by Nicolas Gallagher */\n background:\n linear-gradient(324deg, #fdfdfd 4%, transparent 4%) -70px 43px,\n linear-gradient( 36deg, #fdfdfd 4%, transparent 4%) 30px 43px,\n linear-gradient( 72deg, #e3d7bf 8.5%, transparent 8.5%) 30px 43px,\n linear-gradient(288deg, #e3d7bf 8.5%, transparent 8.5%) -70px 43px,\n linear-gradient(216deg, #e3d7bf 7.5%, transparent 7.5%) -70px 23px,\n linear-gradient(144deg, #e3d7bf 7.5%, transparent 7.5%) 30px 23px,\n\n linear-gradient(324deg, #fdfdfd 4%, transparent 4%) -20px 93px,\n linear-gradient( 36deg, #fdfdfd 4%, transparent 4%) 80px 93px,\n linear-gradient( 72deg, #e3d7bf 8.5%, transparent 8.5%) 80px 93px,\n linear-gradient(288deg, #e3d7bf 8.5%, transparent 8.5%) -20px 93px,\n linear-gradient(216deg, #e3d7bf 7.5%, transparent 7.5%) -20px 73px,\n linear-gradient(144deg, #e3d7bf 7.5%, transparent 7.5%) 80px 73px;\n background-color: #fdfdfd;\n background-size: 100px 100px;\n}\n\n.wrapper {\n margin: 0 50px;\n}\n"]} -------------------------------------------------------------------------------- /docs/legacy-browsers.68d19066.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["styles.css"],"names":[],"mappings":"AAAA,EACE,SAAU,CACV,QAAS,CACT,qBACF,CAEA,KACE,UAAW,CACX,cAAe,CACf,eAAgB,CAChB,sCAAyC,CACzC,iBACF,CAEA,gBACE,kBAAqB,CACrB,YAAa,CACb,cAAe,CACf,KAAM,CACN,OAAQ,CACR,WACF,CAEA,kBACE,SACF,CAEA,QACE,UAAW,CACX,kBAAmB,CACnB,iBAAkB,CAClB,eACF,CAEA,eACE,UAAW,CACX,kBAAmB,CACnB,YACF,CAEA,mBACE,kBACF,CAEA,uBACE,eAAgB,CAChB,aAAc,CAEd,qBAAqB,CACrB,sfAKoF,CACpF,0BAA0B,CAC1B,6DACF,CAEA,oBACE,oBACF,CAEA,aACE,UAAW,CACX,aAAc,CACd,4BAA6B,CAC7B,UAAW,CAEX,guBAamE,CACjE,wBAAyB,CACzB,2BACJ,CAEA,SACE,aACF","file":"legacy-browsers.68d19066.css","sourceRoot":"../examples","sourcesContent":["* {\n padding: 0;\n margin: 0;\n box-sizing: border-box;\n}\n\nbody {\n color: #333;\n font-size: 20px;\n line-height: 1.5;\n font-family: Arial, Helvetica, sans-serif;\n text-align: center;\n}\n\n.scrollPosition {\n background: indianred;\n color: indigo;\n position: fixed;\n top: 0;\n right: 0;\n z-index: 100;\n}\n\n.header-container {\n z-index: 1;\n}\n\n.header {\n width: 100%;\n background: #009FE3;\n padding: 50px 30px;\n font-weight: bold;\n}\n\n.sticky-inline {\n width: 100%;\n background: #ff8080;\n padding: 30px;\n}\n\n.sticky-inline-odd {\n background: #e6ff60;\n}\n\n.sticky-inline-sidebar {\n overflow: hidden;\n height: 1000px;\n /* pattern from https://leaverou.github.io/css3patterns/#japanese-cube */\n background-color:#556;\n background-image: linear-gradient(30deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445),\n linear-gradient(150deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445),\n linear-gradient(30deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445),\n linear-gradient(150deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445),\n linear-gradient(60deg, #99a 25%, transparent 25.5%, transparent 75%, #99a 75%, #99a),\n linear-gradient(60deg, #99a 25%, transparent 25.5%, transparent 75%, #99a 75%, #99a);\n background-size:80px 140px;\n background-position: 0 0, 0 0, 40px 70px, 40px 70px, 0 0, 40px 70px;\n}\n\n.sticky-placeholder {\n padding-bottom: 100px;\n}\n\n.placeholder {\n width: 100%;\n height: 2500px;\n border-bottom: 5px solid #333;\n color: #fff;\n /* pattern from http://lea.verou.me/css3patterns/#stars by Nicolas Gallagher */\n background:\n linear-gradient(324deg, #fdfdfd 4%, transparent 4%) -70px 43px,\n linear-gradient( 36deg, #fdfdfd 4%, transparent 4%) 30px 43px,\n linear-gradient( 72deg, #e3d7bf 8.5%, transparent 8.5%) 30px 43px,\n linear-gradient(288deg, #e3d7bf 8.5%, transparent 8.5%) -70px 43px,\n linear-gradient(216deg, #e3d7bf 7.5%, transparent 7.5%) -70px 23px,\n linear-gradient(144deg, #e3d7bf 7.5%, transparent 7.5%) 30px 23px,\n\n linear-gradient(324deg, #fdfdfd 4%, transparent 4%) -20px 93px,\n linear-gradient( 36deg, #fdfdfd 4%, transparent 4%) 80px 93px,\n linear-gradient( 72deg, #e3d7bf 8.5%, transparent 8.5%) 80px 93px,\n linear-gradient(288deg, #e3d7bf 8.5%, transparent 8.5%) -20px 93px,\n linear-gradient(216deg, #e3d7bf 7.5%, transparent 7.5%) -20px 73px,\n linear-gradient(144deg, #e3d7bf 7.5%, transparent 7.5%) 80px 73px;\n background-color: #fdfdfd;\n background-size: 100px 100px;\n}\n\n.wrapper {\n margin: 0 50px;\n}\n"]} -------------------------------------------------------------------------------- /lib/StickyPlaceholder.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { 3 | ObserveViewport, 4 | IDimensions, 5 | IRect, 6 | requestAnimationFrame, 7 | cancelAnimationFrame, 8 | } from 'react-viewport-utils'; 9 | import ElementResizeObserver from './ElementResizeObserver'; 10 | 11 | interface IProps { 12 | disableResizing: boolean; 13 | disabled: boolean; 14 | style: React.CSSProperties | null; 15 | stickyRef: React.RefObject; 16 | children: (props: { isRecalculating: boolean }) => React.ReactNode; 17 | className?: string; 18 | forwardRef?: React.RefObject; 19 | } 20 | 21 | interface IState { 22 | isRecalculating: boolean; 23 | isWaitingForRecalculation: boolean; 24 | stickyHeight: number | null; 25 | stickyWidth: number | null; 26 | clientHash: string | null; 27 | } 28 | 29 | class StickyPlaceholder extends React.Component { 30 | private recalculationTick?: number; 31 | private isUnmounted?: boolean; 32 | private lastDimensions?: IDimensions; 33 | static defaultProps = { 34 | style: {}, 35 | }; 36 | 37 | state: IState = { 38 | isRecalculating: false, 39 | isWaitingForRecalculation: false, 40 | stickyHeight: null, 41 | stickyWidth: null, 42 | clientHash: null, 43 | }; 44 | 45 | componentWillUnmount() { 46 | cancelAnimationFrame(this.recalculationTick); 47 | this.isUnmounted = true; 48 | } 49 | 50 | calculateSize = () => { 51 | if ( 52 | this.props.stickyRef.current && 53 | !this.state.isRecalculating && 54 | this.state.isWaitingForRecalculation 55 | ) { 56 | return this.props.stickyRef.current.getBoundingClientRect(); 57 | } 58 | return null; 59 | }; 60 | 61 | handleDimensionsUpdate = ( 62 | { dimensions }: { dimensions: IDimensions }, 63 | stickyRect: IRect | null, 64 | ) => { 65 | if (this.isUnmounted) { 66 | return; 67 | } 68 | this.lastDimensions = dimensions; 69 | const { width, clientWidth } = dimensions; 70 | const nextClientHash = [width, clientWidth].join(','); 71 | 72 | if ( 73 | !this.state.isWaitingForRecalculation && 74 | this.state.clientHash !== nextClientHash 75 | ) { 76 | this.setState( 77 | { 78 | clientHash: nextClientHash, 79 | isRecalculating: true, 80 | isWaitingForRecalculation: true, 81 | }, 82 | () => { 83 | if (this.isUnmounted) { 84 | return; 85 | } 86 | this.recalculationTick = requestAnimationFrame(() => { 87 | this.setState({ 88 | isRecalculating: false, 89 | }); 90 | this.recalculationTick = undefined; 91 | }); 92 | }, 93 | ); 94 | return; 95 | } 96 | 97 | if (stickyRect) { 98 | if ( 99 | this.state.isWaitingForRecalculation || 100 | stickyRect.height !== this.state.stickyHeight || 101 | stickyRect.width !== this.state.stickyWidth 102 | ) { 103 | this.setState({ 104 | clientHash: nextClientHash, 105 | stickyHeight: stickyRect.height, 106 | stickyWidth: stickyRect.width, 107 | isWaitingForRecalculation: false, 108 | }); 109 | return; 110 | } 111 | } 112 | }; 113 | 114 | handleElementResize = (stickyRect: IRect) => { 115 | if (this.lastDimensions) { 116 | this.handleDimensionsUpdate( 117 | { dimensions: this.lastDimensions }, 118 | stickyRect, 119 | ); 120 | } 121 | }; 122 | 123 | render() { 124 | const { children, disabled, style, className, forwardRef } = this.props; 125 | const { 126 | isRecalculating, 127 | isWaitingForRecalculation, 128 | stickyHeight, 129 | stickyWidth, 130 | } = this.state; 131 | const isActive = !disabled && !isWaitingForRecalculation; 132 | const baseStyle = { position: 'relative', ...style } as const; 133 | const containerStyle: React.CSSProperties = isActive 134 | ? ({ 135 | height: stickyHeight, 136 | width: stickyWidth, 137 | ...baseStyle, 138 | } as const) 139 | : baseStyle; 140 | return ( 141 | <> 142 |

143 | {children({ 144 | isRecalculating: isWaitingForRecalculation, 145 | })} 146 |

147 | {!this.props.disableResizing && ( 148 | <> 149 | 156 | 160 | 161 | )} 162 | 163 | ); 164 | } 165 | } 166 | 167 | export default StickyPlaceholder; 168 | -------------------------------------------------------------------------------- /examples/index.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { render } from 'react-dom'; 3 | import { ObserveViewport, useRect } from 'react-viewport-utils'; 4 | 5 | import { Sticky, StickyScrollUp, StickyProvider } from '../lib/index'; 6 | 7 | import './styles.css'; 8 | 9 | const Placeholder = () =>

; 10 | const Test = () => { 11 | const div = React.useRef(null); 12 | return

; 13 | }; 14 | 15 | class Example extends React.PureComponent< 16 | {}, 17 | { disableHeader: boolean; disableAll: boolean } 18 | > { 19 | private container1: React.RefObject; 20 | private container2: React.RefObject; 21 | private container3: React.RefObject; 22 | private container4: React.RefObject; 23 | private container5: React.RefObject; 24 | private container6: React.RefObject; 25 | private container7: React.RefObject; 26 | 27 | constructor(props) { 28 | super(props); 29 | this.container1 = React.createRef(); 30 | this.container2 = React.createRef(); 31 | this.container3 = React.createRef(); 32 | this.container4 = React.createRef(); 33 | this.container5 = React.createRef(); 34 | this.container6 = React.createRef(); 35 | this.container7 = React.createRef(); 36 | this.state = { 37 | disableHeader: false, 38 | disableAll: false, 39 | }; 40 | } 41 | 42 | toggleHeaderState() { 43 | this.setState({ 44 | disableHeader: !this.state.disableHeader, 45 | }); 46 | } 47 | 48 | toggleAll() { 49 | this.setState({ 50 | disableAll: !this.state.disableAll, 51 | }); 52 | } 53 | 54 | render() { 55 | if (this.state.disableAll) { 56 | return ; 57 | } 58 | return ( 59 | <> 60 | 61 | 62 | 63 | {({ scroll }) => ( 64 |

65 |

66 | {scroll.x.toFixed(2)}x{scroll.y.toFixed(2)} 67 |

68 | 71 |
72 | 73 |

74 | )} 75 | 76 | 77 | 78 | 82 | {({ isSticky, isNearToViewport }) => ( 83 |

84 | Header isNearToViewport: {isNearToViewport ? 'true' : 'false'}, 85 | isSticky: {isSticky ? 'true' : 'false'} 86 |

87 | )} 88 | 89 | 90 | 91 |

92 | 97 |

style: marginTop: 100

98 | 99 | 100 |

101 | 102 |

103 | 107 | {({ isSticky, isDockedToBottom, isNearToViewport }) => ( 108 |

109 | stickyProps: paddingBottom: 100 110 |
111 | isSticky: {isSticky ? 'true' : 'false'} 112 |
113 | isDockedToBottom: {isDockedToBottom ? 'true' : 'false'} 114 |
115 | isNearToViewport: {isNearToViewport ? 'true' : 'false'} 116 |

117 | )} 118 | 119 | 120 |

121 | 122 |

123 | 124 |

default props

125 | 126 | 127 |

128 | 129 |

130 | 131 |

132 | defaultOffsetTop: 100 133 |

134 | 135 | 136 |

137 | 138 |

142 |

143 | 144 | {({ appliedOverflowScroll }) => ( 145 |

146 | overflowScroll="flow" 147 |
148 |
149 | appliedOverflowScroll: {appliedOverflowScroll} 150 |
151 |
152 | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed 153 | do eiusmod tempor incididunt ut labore et dolore magna aliqua. 154 | Ut enim ad minim veniam, quis nostrud exercitation ullamco 155 | laboris nisi ut aliquip ex ea commodo consequat. Duis aute 156 | irure dolor in reprehenderit in voluptate velit esse cillum 157 | dolore eu fugiat nulla pariatur. Excepteur sint occaecat 158 | cupidatat non proident, sunt in culpa qui officia deserunt 159 | mollit anim id est laborum. 160 |

161 | )} 162 | 163 |

164 |

165 | 166 |

167 | overflowScroll="end" 168 |
169 |
170 | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do 171 | eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut 172 | enim ad minim veniam, quis nostrud exercitation ullamco laboris 173 | nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor 174 | in reprehenderit in voluptate velit esse cillum dolore eu fugiat 175 | nulla pariatur. Excepteur sint occaecat cupidatat non proident, 176 | sunt in culpa qui officia deserunt mollit anim id est laborum. 177 |

178 | 179 |

180 |

181 | 182 |

183 | 184 |

185 | 186 |

187 | 188 |

189 | 190 | 191 |

disableHardwareAcceleration: true

192 | 193 | 194 | 195 | 196 | 197 | 198 | ); 199 | } 200 | } 201 | 202 | const DynamicContent = () => { 203 | const [count, setCount] = React.useState(1); 204 | 205 | return ( 206 |

207 | 208 | {Array(count) 209 | .fill(null) 210 | .map((_, index) => ( 211 |

{index}

212 | ))} 213 |

214 | ); 215 | }; 216 | 217 | render( 218 | 219 | 220 |

221 | 222 | 223 | 224 | 225 |

226 | 227 | , 228 | document.getElementById('root'), 229 | ); 230 | -------------------------------------------------------------------------------- /lib/StickyScrollUp.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { ObserveViewport, IRect, IScroll } from 'react-viewport-utils'; 3 | 4 | import { connect as connectStickyProvider } from './StickyProvider'; 5 | import StickyElement from './StickyElement'; 6 | import StickyPlaceholder from './StickyPlaceholder'; 7 | import { 8 | TRenderChildren, 9 | IStickyComponentProps, 10 | IStickyInjectedProps, 11 | IPositionStyles, 12 | } from './types'; 13 | import { supportsWillChange, shallowEqualPositionStyles } from './utils'; 14 | 15 | interface IOwnProps extends IStickyComponentProps { 16 | /** 17 | * The child node that is rendered within the sticky container. When rendered as a function it will add further information the the function which can be used e.g. to update stylings. 18 | */ 19 | children?: TRenderChildren<{ 20 | isNearToViewport: boolean; 21 | isSticky: boolean; 22 | }>; 23 | /** 24 | * When not initialized as the first element within the page (directly at the top) this allows to set an offset by hand from where the component will be sticky. 25 | * @deprecated If not set, the start position is now calculated by default as it was already the case for the `Sticky` component. As there is no use case for this property anymore it will be removed in the future. 26 | */ 27 | defaultOffsetTop?: number; 28 | } 29 | 30 | interface IProps extends IOwnProps, IStickyInjectedProps {} 31 | 32 | interface IState { 33 | styles: IPositionStyles; 34 | isNearToViewport: boolean; 35 | isSticky: boolean; 36 | } 37 | 38 | const calcPositionStyles = ( 39 | rect: IRect, 40 | scroll: IScroll, 41 | { offsetTop = 0 }, 42 | ): IPositionStyles => { 43 | const rectTop = Math.round(rect.top); 44 | const scrollY = Math.round(scroll.y); 45 | if (scroll.isScrollingDown) { 46 | // disable sticky mode above the top offset while scrolling down 47 | if (rectTop > 0 && scrollY < offsetTop) { 48 | return { 49 | position: 'absolute', 50 | top: 0, 51 | }; 52 | } 53 | 54 | // element is visible and scrolls down 55 | return { 56 | position: 'absolute', 57 | top: Math.max(scrollY - offsetTop + rectTop, 0), 58 | }; 59 | } 60 | 61 | const isTopVisible = rectTop >= 0; 62 | const isBottomVisible = rectTop + rect.height <= 0; 63 | // element is visible and scrolls up 64 | if (!isTopVisible && !isBottomVisible) { 65 | return { 66 | position: 'absolute', 67 | top: scrollY - offsetTop + rectTop, 68 | }; 69 | } 70 | 71 | // disable sticky mode above the top offset while scrolling up 72 | if (scrollY <= offsetTop) { 73 | return { 74 | position: 'absolute', 75 | top: 0, 76 | }; 77 | } 78 | 79 | if (Math.round(scroll.yDTurn) === 0) { 80 | // scroll direction changed from down to up and the element was not visible 81 | if (isBottomVisible) { 82 | return { 83 | position: 'absolute', 84 | top: Math.round(scroll.yTurn) - offsetTop - rect.height, 85 | }; 86 | } 87 | // scroll direction changed from down to up and the element was fully visible 88 | return { 89 | position: 'absolute', 90 | top: Math.max(scrollY - offsetTop, 0), 91 | }; 92 | } 93 | 94 | // set sticky 95 | return { 96 | position: 'fixed', 97 | top: 0, 98 | }; 99 | }; 100 | 101 | class StickyScrollUp extends React.PureComponent { 102 | private stickyRef: React.RefObject = React.createRef(); 103 | private placeholderRef: React.RefObject = React.createRef(); 104 | private stickyOffset: number | null = null; 105 | private stickyOffsetHeight: number = 0; 106 | 107 | static defaultProps = { 108 | disableHardwareAcceleration: false, 109 | disableResizing: false, 110 | style: {}, 111 | }; 112 | 113 | state: IState = { 114 | styles: {}, 115 | isNearToViewport: false, 116 | isSticky: false, 117 | }; 118 | 119 | componentDidUpdate(prevProps: IProps, prevState: IState) { 120 | if ( 121 | this.props.updateStickyOffset && 122 | prevProps.disabled !== this.props.disabled 123 | ) { 124 | this.props.updateStickyOffset( 125 | this.props.disabled ? 0 : this.stickyOffset, 126 | this.stickyOffsetHeight, 127 | ); 128 | } 129 | } 130 | 131 | isNearToViewport = (rect: IRect): boolean => { 132 | const padding = 700; 133 | return rect.top - padding < 0; 134 | }; 135 | 136 | getStickyStyles(stickyRect: IRect, placeholderRect: IRect, scroll: IScroll) { 137 | const offsetTop = isNaN(this.props.defaultOffsetTop) 138 | ? Math.round(placeholderRect.top) + Math.round(scroll.y) 139 | : this.props.defaultOffsetTop; 140 | const styles = calcPositionStyles(stickyRect, scroll, { 141 | offsetTop, 142 | }); 143 | 144 | if (!this.props.disableHardwareAcceleration) { 145 | const shouldAccelerate = this.isNearToViewport(stickyRect); 146 | if (supportsWillChange) { 147 | styles.willChange = shouldAccelerate ? 'position, top' : null; 148 | } else { 149 | styles.transform = shouldAccelerate ? `translateZ(0)` : null; 150 | } 151 | } 152 | 153 | return styles; 154 | } 155 | 156 | recalculateLayoutBeforeUpdate = (): { 157 | stickyRect: IRect; 158 | placeholderRect: IRect; 159 | } => { 160 | return { 161 | placeholderRect: this.placeholderRef.current.getBoundingClientRect(), 162 | stickyRect: this.stickyRef.current.getBoundingClientRect(), 163 | }; 164 | }; 165 | 166 | handleViewportUpdate = ( 167 | { scroll }: { scroll: IScroll }, 168 | { 169 | stickyRect, 170 | placeholderRect, 171 | }: { stickyRect: IRect; placeholderRect: IRect }, 172 | ) => { 173 | if (this.props.disabled) { 174 | return; 175 | } 176 | // in case children is not a function renderArgs will never be used 177 | const willRenderAsAFunction = typeof this.props.children === 'function'; 178 | 179 | const nextOffset = Math.max(Math.round(stickyRect.bottom), 0); 180 | const nextOffsetHeight = stickyRect.height; 181 | const offsetDidChange = this.stickyOffset !== nextOffset; 182 | const offsetHeightDidChange = this.stickyOffsetHeight !== nextOffsetHeight; 183 | 184 | const styles = this.getStickyStyles(stickyRect, placeholderRect, scroll); 185 | const stateStyles = this.state.styles; 186 | const stylesDidChange = !shallowEqualPositionStyles(styles, stateStyles); 187 | const isNearToViewport = this.isNearToViewport(stickyRect); 188 | const isSticky = willRenderAsAFunction 189 | ? styles.top === 0 && styles.position === 'fixed' 190 | : false; 191 | const isNearToViewportDidChange = 192 | this.state.isNearToViewport !== isNearToViewport; 193 | const isStickyDidChange = this.state.isSticky !== isSticky; 194 | 195 | if ( 196 | this.props.updateStickyOffset && 197 | (offsetDidChange || offsetHeightDidChange) 198 | ) { 199 | this.props.updateStickyOffset(nextOffset, nextOffsetHeight); 200 | } 201 | 202 | if (!stylesDidChange && !isNearToViewportDidChange && !isStickyDidChange) { 203 | return; 204 | } 205 | 206 | this.setState({ 207 | styles: stylesDidChange ? styles : stateStyles, 208 | isNearToViewport, 209 | isSticky, 210 | }); 211 | }; 212 | 213 | renderSticky = ({ isRecalculating }: { isRecalculating: boolean }) => { 214 | const { disabled, children, stickyProps } = this.props; 215 | return ( 216 | 221 | > 222 | forwardRef={this.stickyRef} 223 | positionStyle={this.state.styles} 224 | disabled={disabled || isRecalculating} 225 | children={children} 226 | renderArgs={{ 227 | isNearToViewport: this.state.isNearToViewport, 228 | isSticky: this.state.isSticky, 229 | }} 230 | {...stickyProps} 231 | /> 232 | ); 233 | }; 234 | 235 | render() { 236 | const { disabled, disableResizing, style, className } = this.props; 237 | return ( 238 | <> 239 | 247 | {this.renderSticky} 248 | 249 | 256 | 257 | ); 258 | } 259 | } 260 | 261 | export default connectStickyProvider()(StickyScrollUp); 262 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # React Stickup 2 | 3 | React components to stick elements at the top of the page while scrolling. 4 | 5 | ![](https://img.shields.io/npm/l/react-stickup.svg) 6 | [![](https://img.shields.io/npm/v/react-stickup.svg)](https://www.npmjs.com/package/react-stickup) 7 | ![](https://img.shields.io/david/garthenweb/react-stickup.svg) 8 | [![](https://img.shields.io/bundlephobia/minzip/react-stickup.svg)](https://bundlephobia.com/result?p=react-stickup) 9 | [![Build Status](https://travis-ci.org/garthenweb/react-stickup.svg?branch=master)](https://travis-ci.org/garthenweb/react-stickup) 10 | 11 | ## Features 12 | 13 | * [`Sticky`](#sticky) component like `position: sticky` with options for elements bigger than the viewport 14 | * [`StickyScrollUp`](#stickyscrollup) component that is only visible when scrolling up (like the Chrome Browser url bar on Android) 15 | * Support for modern browsers (including IE11) 16 | * Build with performance in mind: Blazing fast, even on low end devices 17 | * Typescript 18 | 19 | [See the example to see how the library will work in production.](http://garthenweb.github.io/react-stickup) 20 | 21 | ## Installation 22 | 23 | ``` 24 | npm install --save react-stickup 25 | ``` 26 | 27 | ## Requirements 28 | 29 | * [react](https://reactjs.org/) version `16.3` or higher 30 | 31 | ## Static Types 32 | 33 | * Support for [Typescript](https://www.typescriptlang.org/) is included within this library, no need to install additional packages 34 | * [Flow](https://flow.org/en/) is not supported (feel free to create a PR) 35 | 36 | ## Client Support 37 | 38 | This library aims to support the following clients 39 | 40 | * Chrome/ Chrome Android (latest) 41 | * Firefox (latest) 42 | * Edge (latest) 43 | * Safari/ Safari iOS (latest) 44 | * NodeJS (latest) 45 | * Internet Explorer 11 (with @babel/polyfill) 46 | 47 | Please fill an issue in case your client is not supported or you see an issue in one of the above. 48 | 49 | ## Usage 50 | 51 | ### StickyProvider 52 | 53 | This component is required as a parent for `Sticky` and `StickyScrollUp` component to work. It will take care of registration of event handlers and provides a communication channel between components. The main implementation is based on [react-viewport-utils](https://github.com/garthenweb/react-viewport-utils). 54 | 55 | ### Sticky 56 | 57 | Acts like `position: sticky` css property. 58 | By default the component will be sticky when the top offset is reached and will stay that way. In case it should only stick within a certain container it can get assigned as a reference. 59 | 60 | **Important**: To work properly the `Sticky` component must have a `StickyProvider` as a parent within its tree. 61 | 62 | #### Example 63 | 64 | ``` javascript 65 | import * as React from 'react'; 66 | import { Sticky } from 'react-stickup'; 67 | 68 | const container = React.createRef(); 69 | 70 | render( 71 | 72 |

73 | 74 |

My Header

75 | 76 |

77 | Lots of content 78 |

79 |

80 | 81 |

My Header

82 | 83 | , 84 | document.querySelector('main') 85 | ); 86 | ``` 87 | 88 | #### Properties 89 | 90 | **`children?: React.ReactNode | ((options: { isSticky: boolean, isDockedToBottom: boolean, isNearToViewport: boolean, appliedOverflowScroll: 'end' | 'flow' }) => React.ReactNode)`** 91 | 92 | The child node that is rendered within the sticky container. When rendered as a function it will add further information the the function which can be used e.g. to update stylings. 93 | 94 | **`container?: React.RefObject`** 95 | 96 | The reference to the container to stick into. If this is not set, the component will be sticky regardless how far the user scrolls down. 97 | 98 | **`defaultOffsetTop?: number`** 99 | 100 | A top offset to create a padding between the browser window and the sticky component when sticky. 101 | 102 | **`overflowScroll?: 'end' | 'flow'`** 103 | 104 | Defines how the sticky element should react in case its bigger than the viewport. 105 | Different options are available: 106 | 107 | * `end`: The default value will keep the component sticky as long as it reaches the bottom of its container and only then will scroll down. 108 | * `flow`: The element scrolls with the flow of the scroll direction, therefore the content is easier to access. 109 | 110 | **`disabled?: boolean`** 111 | 112 | Allows to disable all sticky behavior. Use this in case you need to temporary disable the sticky behavior but you don't want to unmount it for performance reasons. 113 | 114 | **`disableHardwareAcceleration?: boolean`** 115 | 116 | By default css styles for hardware acceleration (`will-change` if supported, otherwise falls back to `transform`) are activated. This allows to turn it off. 117 | 118 | **`disableResizing?: boolean`** 119 | 120 | The components will resize when the width of the window changes to adjust its height and width. This allows to turn the resizing off. 121 | 122 | **`stickyProps?: {}`** 123 | 124 | All properties within this object are spread directly into the sticky element within the component. This e.g. allows to add css styles by `className` or `style`. 125 | 126 | **`style?: React.CSSProperties`** 127 | 128 | Will be merged with generated styles of the placeholder element. It also allows to override generated styles. 129 | 130 | **`className?: string`** 131 | 132 | The class name is passed directly to the placeholder element. 133 | 134 | ### StickyScrollUp 135 | 136 | Only Sticky to the top of the page in case it the page is scrolled up. When scrolled down, the content will just scroll out. `Sticky` next to the `StickyScrollUp` will stick to the bottom of it and will therefore not overlap. 137 | 138 | **Important**: To work properly the `StickyScrollUp` component must have a `StickyProvider` as a parent within its tree. All `Sticky` components must be wrapped by the same instance of the `StickyProvider`as the `StickyScrollUp` component to not overlap. 139 | 140 | #### Example 141 | 142 | ``` javascript 143 | import * as React from 'react'; 144 | import { Sticky, StickyScrollUp, StickyProvider } from 'react-stickup'; 145 | 146 | const container = React.createRef(); 147 | 148 | render( 149 | 150 | 151 | My Stick up container 152 | 153 |

154 | 155 |

My Header

156 | 157 |

158 | Lots of content 159 |

160 |

161 | , 162 | document.querySelector('main') 163 | ); 164 | ``` 165 | 166 | #### Properties 167 | 168 | **`children?: React.ReactNode | ((options: { isSticky: boolean, isNearToViewport: boolean }) => React.ReactNode)`** 169 | 170 | The child node that is rendered within the sticky container. When rendered as a function it will add further information the the function which can be used e.g. to update stylings. 171 | 172 | **`disabled?: boolean`** 173 | 174 | Allows to disable all sticky behavior. Use this in case you need to temporary disable the sticky behavior but you don't want to unmount it for performance reasons. 175 | 176 | **`disableHardwareAcceleration?: boolean`** 177 | 178 | By default css styles for hardware acceleration (`will-change` if supported, otherwise falls back to `transform`) are activated. This allows to turn it off. 179 | 180 | **`disableResizing?: boolean`** 181 | 182 | The components will resize when the width of the window changes to adjust its height and width. This allows to turn the resizing off. 183 | 184 | **`stickyProps?: {}`** 185 | 186 | All properties within this object are spread directly into the sticky element within the component. This e.g. allows to add css styles by `className` or `style`. 187 | 188 | **`style?: React.CSSProperties`** 189 | 190 | Will be merged with generated styles of the placeholder element. It also allows to override generated styles. 191 | 192 | **`className?: string`** 193 | 194 | The class name is passed directly to the placeholder element. 195 | 196 | **`defaultOffsetTop?: number`** 197 | 198 | DEPRECATED: If not set, the start position is now calculated by default as it was already the case for the `Sticky` component. As there is no use case for this property anymore it will be removed in the future. 199 | 200 | When not initialized as the first element within the page (directly at the top) this allows to set an offset by hand from where the component will be sticky. 201 | 202 | ## Contributing 203 | 204 | Contributions are highly appreciated! The easiest is to fill an issue in case there is one before providing a PR so we can discuss the issue and a possible solution up front. 205 | 206 | At the moment there is not a test suite because its tricky to test the sticky behavior automated. I consider creating some e2e tests with Cypress in the future. In case you are interested in helping on that, please let me know! 207 | 208 | For now, please make sure to add a test case for all features in the examples. 209 | 210 | To start the example with the recent library changes just run `npm start` on the command. 211 | 212 | ## License 213 | 214 | Licensed under the [MIT License](https://opensource.org/licenses/mit-license.php). 215 | -------------------------------------------------------------------------------- /lib/Sticky.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { 3 | ObserveViewport, 4 | IRect, 5 | IScroll, 6 | IDimensions, 7 | } from 'react-viewport-utils'; 8 | 9 | import { connect as connectStickyProvider } from './StickyProvider'; 10 | import StickyElement from './StickyElement'; 11 | import StickyPlaceholder from './StickyPlaceholder'; 12 | import { 13 | TRenderChildren, 14 | IStickyComponentProps, 15 | IStickyInjectedProps, 16 | IPositionStyles, 17 | } from './types'; 18 | import { 19 | supportsWillChange, 20 | shallowEqualPositionStyles, 21 | supportsPositionSticky, 22 | } from './utils'; 23 | 24 | type OverflowScrollType = 'flow' | 'end'; 25 | 26 | interface IOwnProps extends IStickyComponentProps { 27 | /** 28 | * The reference to the container to stick into. If this is not set, the component will be sticky regardless how far the user scrolls down. 29 | */ 30 | container?: React.RefObject; 31 | /** 32 | * The child node that is rendered within the sticky container. When rendered as a function it will add further information the the function which can be used e.g. to update stylings. 33 | */ 34 | children?: TRenderChildren<{ 35 | isSticky: boolean; 36 | isDockedToBottom: boolean; 37 | isNearToViewport: boolean; 38 | appliedOverflowScroll: OverflowScrollType; 39 | }>; 40 | /** 41 | * Defines how the sticky element should react in case its bigger than the viewport. 42 | * Different options are available: 43 | * * end: The default value will keep the component sticky as long as it reaches the bottom of its container and only then will scroll down. 44 | * * flow: The element scrolls with the flow of the scroll direction, therefore the content is easier to access. 45 | */ 46 | overflowScroll?: OverflowScrollType; 47 | /** 48 | * A top offset to create a padding between the browser window and the sticky component when sticky. 49 | */ 50 | defaultOffsetTop?: number; 51 | /** 52 | * Tries to detect when the usage of native `position: sticky` is possible and uses it as long as possible. This is an experimental property and might change in its behavior or disappear in the future. 53 | */ 54 | experimentalNative?: boolean; 55 | } 56 | 57 | interface IProps extends IOwnProps, IStickyInjectedProps {} 58 | 59 | interface IState { 60 | isSticky: boolean; 61 | isDockedToBottom: boolean; 62 | isNearToViewport: boolean; 63 | appliedOverflowScroll: OverflowScrollType; 64 | styles: IPositionStyles; 65 | useNativeSticky: boolean; 66 | } 67 | 68 | interface ILayoutSnapshot { 69 | stickyRect: IRect; 70 | containerRect: IRect; 71 | } 72 | 73 | class Sticky extends React.PureComponent { 74 | private stickyRef: React.RefObject = React.createRef(); 75 | private placeholderRef: React.RefObject = React.createRef(); 76 | private nativeStickyThrewOnce: boolean = false; 77 | 78 | static defaultProps = { 79 | stickyOffset: { top: 0, height: 0 }, 80 | defaultOffsetTop: 0, 81 | disableResizing: false, 82 | disableHardwareAcceleration: false, 83 | overflowScroll: 'end' as OverflowScrollType, 84 | experimentalNative: false, 85 | style: {}, 86 | }; 87 | 88 | state: IState = { 89 | isSticky: false, 90 | isDockedToBottom: false, 91 | isNearToViewport: false, 92 | appliedOverflowScroll: 'end', 93 | styles: {}, 94 | useNativeSticky: false, 95 | }; 96 | 97 | get container() { 98 | return this.props.container || this.placeholderRef; 99 | } 100 | 101 | get offsetTop() { 102 | return this.props.stickyOffset.top + this.props.defaultOffsetTop; 103 | } 104 | 105 | hasContainer = () => { 106 | return Boolean(this.props.container); 107 | }; 108 | 109 | isNearToViewport = (rect: IRect): boolean => { 110 | const padding = 700; 111 | return rect.top - padding < 0 && rect.bottom + padding > 0; 112 | }; 113 | 114 | getOverflowScrollType = ( 115 | rectSticky: IRect, 116 | dimensions: IDimensions, 117 | ): OverflowScrollType => { 118 | return this.props.overflowScroll === 'flow' && 119 | this.calcHeightDifference(rectSticky, dimensions) > 0 120 | ? 'flow' 121 | : 'end'; 122 | }; 123 | 124 | isSticky = (rect: IRect, containerRect: IRect, dimensions: IDimensions) => { 125 | if (!this.hasContainer()) { 126 | return Math.round(containerRect.top) <= this.offsetTop; 127 | } 128 | 129 | if (Math.round(containerRect.top) > this.offsetTop) { 130 | return false; 131 | } 132 | 133 | const height = 134 | this.props.overflowScroll === 'flow' 135 | ? Math.min(rect.height, dimensions.height) 136 | : rect.height; 137 | if (Math.round(containerRect.bottom) - this.offsetTop < height) { 138 | return false; 139 | } 140 | 141 | return true; 142 | }; 143 | 144 | shouldUseNativeSticky = (appliedOverflowScroll: OverflowScrollType) => { 145 | if ( 146 | !this.props.experimentalNative || 147 | !supportsPositionSticky || 148 | appliedOverflowScroll !== 'end' || 149 | this.props.stickyOffset.top !== 0 150 | ) { 151 | return false; 152 | } 153 | 154 | if ( 155 | process.env.NODE_ENV !== 'production' && 156 | !this.nativeStickyThrewOnce && 157 | (this.placeholderRef && this.placeholderRef.current.parentElement) !== 158 | (this.props.container && this.props.container.current) 159 | ) { 160 | console.warn( 161 | 'react-stickup: a sticky element was used with property `experimentalNative` but its `container` is not the parent the sticky component. As the native sticky implementation always uses its parent element as the container. This can lead to unexpected results. It is therefore recommended to change the DOM structure so that the container is a direct parent of the Sticky component or to remove the `experimentalNative` property.', 162 | ); 163 | this.nativeStickyThrewOnce = true; 164 | } 165 | return true; 166 | }; 167 | 168 | isDockedToBottom = ( 169 | rect: IRect, 170 | containerRect: IRect, 171 | dimensions: IDimensions, 172 | ) => { 173 | if (!rect || !containerRect) { 174 | return false; 175 | } 176 | 177 | if (!this.hasContainer()) { 178 | return false; 179 | } 180 | 181 | if (rect.height > containerRect.height) { 182 | return false; 183 | } 184 | 185 | const height = 186 | this.props.overflowScroll === 'flow' 187 | ? Math.min(rect.height, dimensions.height) 188 | : rect.height; 189 | if (Math.round(containerRect.bottom) - this.offsetTop >= height) { 190 | return false; 191 | } 192 | 193 | return true; 194 | }; 195 | 196 | calcHeightDifference(rectSticky: IRect, dimensions: IDimensions) { 197 | if (!dimensions) { 198 | return 0; 199 | } 200 | return Math.max(0, Math.round(rectSticky.height) - dimensions.height); 201 | } 202 | 203 | calcOverflowScrollFlowStickyStyles( 204 | rectSticky: IRect, 205 | containerRect: IRect, 206 | scroll: IScroll, 207 | dimensions: IDimensions, 208 | ): IPositionStyles { 209 | const containerTop = Math.round(containerRect.top); 210 | const stickyTop = Math.round(rectSticky.top); 211 | const scrollY = Math.round(scroll.y); 212 | const scrollYTurn = Math.round(scroll.yTurn); 213 | const heightDiff = this.calcHeightDifference(rectSticky, dimensions); 214 | const containerTopOffset = 215 | containerTop + scrollY - this.props.stickyOffset.height; 216 | const isStickyBottomReached = 217 | Math.round(rectSticky.bottom) <= dimensions.height; 218 | const isContainerTopReached = containerTop < this.offsetTop; 219 | const isTurnWithinHeightOffset = 220 | scrollYTurn - heightDiff <= containerTopOffset; 221 | const isTurnPointBeforeContainer = scrollYTurn < containerTopOffset; 222 | const isTurnPointAfterContainer = 223 | scrollYTurn > containerTopOffset + containerRect.height; 224 | const isTurnPointWithinContainer = !( 225 | isTurnPointBeforeContainer || isTurnPointAfterContainer 226 | ); 227 | // scroll down AND sticky rect bottom not reached AND turn point not within the container OR 228 | // scroll up AND container top not reached OR 229 | //scroll up AND turns within the height diff AND turn point not within the container 230 | if ( 231 | (scroll.isScrollingDown && 232 | !isStickyBottomReached && 233 | !isTurnPointWithinContainer) || 234 | (scroll.isScrollingUp && !isContainerTopReached) || 235 | (scroll.isScrollingUp && 236 | isTurnWithinHeightOffset && 237 | !isTurnPointWithinContainer) 238 | ) { 239 | return { 240 | position: 'absolute', 241 | top: 0, 242 | }; 243 | } 244 | 245 | // scroll down AND sticky bottom reached 246 | if (scroll.isScrollingDown && isStickyBottomReached) { 247 | return { 248 | position: 'fixed', 249 | top: -heightDiff, 250 | }; 251 | } 252 | 253 | const isStickyTopReached = stickyTop >= this.offsetTop; 254 | // scroll down AND turn point within container OR 255 | // scroll up AND turn point not before container AND not sticky top reached 256 | if ( 257 | (scroll.isScrollingDown && isTurnPointWithinContainer) || 258 | (scroll.isScrollingUp && 259 | !isTurnPointBeforeContainer && 260 | !isStickyTopReached) 261 | ) { 262 | return { 263 | position: 'absolute', 264 | top: Math.abs(scrollY - stickyTop + (containerTop - scrollY)), 265 | }; 266 | } 267 | 268 | return { 269 | position: 'fixed', 270 | top: this.offsetTop, 271 | }; 272 | } 273 | 274 | calcPositionStyles( 275 | rectSticky: IRect, 276 | containerRect: IRect, 277 | scroll: IScroll, 278 | dimensions: IDimensions, 279 | ): IPositionStyles { 280 | if (this.isSticky(rectSticky, containerRect, dimensions)) { 281 | if (this.getOverflowScrollType(rectSticky, dimensions) === 'flow') { 282 | return this.calcOverflowScrollFlowStickyStyles( 283 | rectSticky, 284 | containerRect, 285 | scroll, 286 | dimensions, 287 | ); 288 | } 289 | const stickyOffset = this.props.stickyOffset.top; 290 | const stickyHeight = this.props.stickyOffset.height; 291 | const headIsFlexible = stickyOffset > 0 && stickyOffset < stickyHeight; 292 | if (headIsFlexible) { 293 | const relYTurn = 294 | Math.round(scroll.yTurn - scroll.y + scroll.yDTurn) - 295 | Math.round(containerRect.top); 296 | return { 297 | position: 'absolute', 298 | top: relYTurn + this.offsetTop, 299 | }; 300 | } 301 | 302 | return { 303 | position: 'fixed', 304 | top: this.offsetTop, 305 | }; 306 | } 307 | 308 | if (this.isDockedToBottom(rectSticky, containerRect, dimensions)) { 309 | return { 310 | position: 'absolute', 311 | top: containerRect.height - rectSticky.height, 312 | }; 313 | } 314 | 315 | return { 316 | position: 'absolute', 317 | top: 0, 318 | }; 319 | } 320 | 321 | getStickyStyles( 322 | rect: IRect, 323 | containerRect: IRect, 324 | scroll: IScroll, 325 | dimensions: IDimensions, 326 | ): IPositionStyles { 327 | const styles = this.calcPositionStyles( 328 | rect, 329 | containerRect, 330 | scroll, 331 | dimensions, 332 | ); 333 | 334 | if (!this.props.disableHardwareAcceleration) { 335 | const shouldAccelerate = this.isNearToViewport(rect); 336 | if (supportsWillChange) { 337 | styles.willChange = shouldAccelerate ? 'position, top' : null; 338 | } else { 339 | styles.transform = shouldAccelerate ? `translateZ(0)` : null; 340 | } 341 | } 342 | 343 | return styles; 344 | } 345 | 346 | recalculateLayoutBeforeUpdate = (): ILayoutSnapshot => { 347 | const containerRect = this.container.current.getBoundingClientRect(); 348 | const stickyRect = this.stickyRef.current.getBoundingClientRect(); 349 | return { 350 | stickyRect, 351 | containerRect, 352 | }; 353 | }; 354 | 355 | handleScrollUpdate = ( 356 | { scroll, dimensions }: { scroll: IScroll; dimensions: IDimensions }, 357 | { stickyRect, containerRect }: ILayoutSnapshot, 358 | ) => { 359 | if (this.props.disabled) { 360 | return; 361 | } 362 | // in case children is not a function renderArgs will never be used 363 | const willRenderAsAFunction = typeof this.props.children === 'function'; 364 | const appliedOverflowScroll = this.getOverflowScrollType( 365 | stickyRect, 366 | dimensions, 367 | ); 368 | 369 | const useNativeSticky = this.shouldUseNativeSticky(appliedOverflowScroll); 370 | 371 | const styles = useNativeSticky 372 | ? {} 373 | : this.getStickyStyles(stickyRect, containerRect, scroll, dimensions); 374 | const stateStyles = this.state.styles; 375 | const stylesDidChange = !shallowEqualPositionStyles(styles, stateStyles); 376 | const isSticky = willRenderAsAFunction 377 | ? this.isSticky(stickyRect, containerRect, dimensions) 378 | : false; 379 | const isDockedToBottom = willRenderAsAFunction 380 | ? this.isDockedToBottom(stickyRect, containerRect, dimensions) 381 | : false; 382 | const isNearToViewport = this.isNearToViewport(stickyRect); 383 | const useNativeStickyDidChange = 384 | this.state.useNativeSticky !== useNativeSticky; 385 | const isStickyDidChange = this.state.isSticky !== isSticky; 386 | const isDockedToBottomDidChange = 387 | this.state.isDockedToBottom !== isDockedToBottom; 388 | const isNearToViewportDidChange = 389 | this.state.isNearToViewport !== isNearToViewport; 390 | const appliedOverflowScrollDidChange = 391 | appliedOverflowScroll !== this.state.appliedOverflowScroll; 392 | 393 | if ( 394 | !useNativeStickyDidChange && 395 | !stylesDidChange && 396 | !isStickyDidChange && 397 | !isDockedToBottomDidChange && 398 | !isNearToViewportDidChange && 399 | !appliedOverflowScrollDidChange 400 | ) { 401 | return; 402 | } 403 | 404 | this.setState({ 405 | useNativeSticky, 406 | isSticky, 407 | isDockedToBottom, 408 | isNearToViewport, 409 | appliedOverflowScroll, 410 | styles: stylesDidChange ? styles : stateStyles, 411 | }); 412 | }; 413 | 414 | renderSticky = ({ isRecalculating }: { isRecalculating: boolean }) => { 415 | const { children, disabled, stickyProps } = this.props; 416 | return ( 417 | 424 | > 425 | forwardRef={this.stickyRef} 426 | positionStyle={this.state.styles} 427 | disabled={disabled || isRecalculating} 428 | children={children} 429 | renderArgs={{ 430 | isSticky: this.state.isSticky, 431 | isDockedToBottom: this.state.isDockedToBottom, 432 | isNearToViewport: this.state.isNearToViewport, 433 | appliedOverflowScroll: this.state.appliedOverflowScroll, 434 | }} 435 | {...stickyProps} 436 | /> 437 | ); 438 | }; 439 | 440 | render() { 441 | const { 442 | disabled, 443 | disableResizing, 444 | style, 445 | className, 446 | overflowScroll, 447 | } = this.props; 448 | return ( 449 | <> 450 | 466 | {this.renderSticky} 467 | 468 | 475 | 476 | ); 477 | } 478 | } 479 | 480 | export default connectStickyProvider()(Sticky); 481 | --------------------------------------------------------------------------------