Affix renders a div element with a fixed position inside the Portal component.
Use it to display elements fixed at any position on the screen, for example, scroll to top button:
Affix is located at the bottom of the screen, scroll to see it
import { IconArrowUp } from'@tabler/icons-react';
import { useWindowScroll } from'@mantine/hooks';
import { Affix, Button, Text, Transition, rem } from'@mantine/core';
functionDemo() {
const [scroll, scrollTo] = useWindowScroll();
return (
<><Textta="center">Affix is located at the bottom of the screen, scroll to see it</Text><Affixposition={{bottom:20, right:20 }}><Transitiontransition="slide-up"mounted={scroll.y > 0}>
{(transitionStyles) => (
<ButtonleftSection={<IconArrowUpstyle={{width:rem(16), height:rem(16) }} />}
style={transitionStyles}
onClick={() => scrollTo({ y: 0 })}
>
Scroll to top
</Button>
)}
</Transition></Affix></>
);
}