use-headroom

Create headers that are hidden after user scrolls past given distance
Import
Source
View source code
Docs
Edit this page
Package
@mantine/hooks

Usage

Use use-headroom hook to create headers that are hidden after user scrolls past given distance in px. The hook returns a boolean value that determines whether element should be pinned or hidden. Hook returns true when current scroll position is less than specified fixedAt value and after user scrolled up.

Header is pinned
import { Box, Portal, rem, Text } from '@mantine/core';
import { useHeadroom } from '@mantine/hooks';


function Demo() {
  const pinned = useHeadroom({ fixedAt: 120 });


  return (
    <>
      <Portal>
        <Box
          sx={(theme) => ({
            position: 'fixed',
            top: 0,
            left: 0,
            right: 0,
            padding: theme.spacing.xs,
            height: rem(60),
            zIndex: 1000000,
            transform: `translate3d(0, ${pinned ? 0 : rem(-110)}, 0)`,
            transition: 'transform 400ms ease',
            backgroundColor:
              theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.colors.gray[0],
          })}
        >
          Pinned header
        </Box>
      </Portal>
      <Text ta="center">Header is {pinned ? 'pinned' : 'not pinned'}</Text>
    </>
  );
}

Definition

function useHeadroom(input?: {
  /** Number in px at which element should be fixed */
  fixedAt?: number;


  /** Called when element is pinned */
  onPin?(): void;


  /** Called when element is at fixed position */
  onFix?(): void;


  /** Called when element is unpinned */
  onRelease?(): void;
}): boolean;
Go back
use-hash – @mantine/hooks
Up next
use-merged-ref – @mantine/hooks
Build fully functional accessible web applications faster than ever
About
ContributeAbout MantineChangelogReleases
Community
Chat on DiscordFollow on TwitterFollow on GitHubGitHub discussions
Project
Mantine UIDocumentationGitHub organizationnpm organization
Built by Vitaly Rtishchev and these awesome people
Join Discord community
Follow Mantine on Twitter