Responsive - deactivate stickybox on mobile devices

[adrienlamotte]

Hello,

Most of the time when using a sticky sidebar, you want the sidebar not to be sticky on small devices.
Is there any way to achieve this ?

Thank you for your work, great lib btw :)

[johnsonthedev]

did you find a solution to it ? I have same challenge

[adrienlamotte]

@johnson444 well for now I define a conditionnal component like :

const StickyWrapper = isLargeScreen ? StickyBox : React.Fragment;

Where isLargeScreen is your test to check the breakpoint.

[johnsonthedev]

@adrienlamotte Thx ! Will do this as well. If I have time I will look closer into the package. If I find a better way I will let you know

[endze1t]

@johnson444 well for now I define a conditionnal component like :

const StickyWrapper = isLargeScreen ? StickyBox : React.Fragment;

Where isLargeScreen is your test to check the breakpoint.

This solution might work, when the children can be re-rendered. In case that the children should not be re-rendered this might kill some flow.

I would prefer like a prop disable , that just disable the calculcation from StickyBox and act just an simple div

          <StickyBox
            offsetTop={160}
            offsetBottom={0}
            disable={!isLargeScreen}
          >

[Arnaud-Desportes]

A simple and fast solution to remove stickyBox on mobile is to add a css class and use @media to cancel the sticky effect according to the desired width. Here is an example :

// In component
<StickyBox className="stickyBox">
    <YourComponent />
</StickyBox>

/*CSS*/
@media (max-width: 1024px) { 
  .stickyBox{
    position: inherit !important;
    top: inherit !important;
  }
}

I hope it helps ++.

[simplenotezy]

@Arnaud-Desportes Nice solution, thanks for sharing!

[namipsg]

@Arnaud-Desportes

You saved me lots of hours, Thanks for the solution!

[antokhio]

MUI 5 solution thanks to @Arnaud-Desportes

import React from 'react';
import { SxProps, Theme, styled } from '@mui/material/styles';

import ReactStickyBox, { StickyBoxCompProps } from 'react-sticky-box';

export interface StickyBoxProps extends StickyBoxCompProps {
  disabled?: boolean;
  sx?: SxProps<Theme>;
}

const StickyBox = styled(ReactStickyBox, {
  shouldForwardProp: (prop) => ['disabled'].every((key) => key !== prop),
})<StickyBoxProps>(({ theme, disabled }) =>
  theme.unstable_sx({
    ...(disabled && {
      position: 'inherit !important',
      top: 'inherit !important',
    }),
  }),
);

export default StickyBox;