Scroll Class Toggle

The ScrollClassToggle is a client-side component that will toggle its classes when it is reached in the viewport. It can be used to toggle element positioning or styles on scroll.

The enableAtElement property controls when the toggle happens. If set to false, the toggle will happen immediately based on the element's height. If set to true, the toggle will happen when the element is scrolled to the top. The default is false.

Example

Preview

On scroll, this element's background color will be toggled.

Code

import { ScrollClassToggle } from '@hv/ui/scroll-class-toggle';

  <ScrollClassToggle
    enableAtElement={true}
    className='bg-muted h-full'
    toggleClass='bg-accent h-full'
  >
    <div className='p-4'>
      On scroll, this element's background color will be toggled.
    </div>
</ScrollClassToggle>

Props

Name	Description	Type
className	Initial styles for the element.	String
toggleClass	Styles to apply to the element on scroll	String
enableAtElement	When to apply the toggle. Default is false.	Boolean
props	Additional properties from HTML Button attributes.	ButtonHTMLAttributes