# useSticky Hook 使用示例

`useSticky` hook 用于检测元素是否处于 sticky 状态，并根据状态应用不同的样式。

## 基本用法

```tsx
import { useSticky } from '@/hooks/useSticky'

const MyComponent = () => {
  const [stickyRef, isSticky] = useSticky<HTMLDivElement>()

  return (
    <div ref={stickyRef} className={cn('sticky top-0 bg-white', isSticky && 'border-b shadow-lg')}>
      <h1>Header</h1>
    </div>
  )
}
```

## 带偏移量的用法

```tsx
const MyHeader = () => {
  // 设置 64px 的偏移量（对应 top-16）
  const [stickyRef, isSticky] = useSticky<HTMLDivElement>({
    offset: 64,
  })

  return (
    <div
      ref={stickyRef}
      className={cn(
        'sticky top-16 transition-all duration-200',
        isSticky && ['bg-white/95 backdrop-blur-sm', 'border-b border-gray-200', 'shadow-sm']
      )}
    >
      内容...
    </div>
  )
}
```

## 工作原理

1. Hook 创建一个不可见的哨兵元素，插入到目标元素之前
2. 使用 `IntersectionObserver` 监听哨兵元素的可见性
3. 当哨兵元素不可见时，说明目标元素已经"粘"在了指定位置
4. 返回 sticky 状态，组件可以根据此状态应用不同样式

## 参数说明

- `offset`: 粘性触发的偏移量（相对于容器顶部），默认为 0
- `root`: 根元素，用于观察交叉状态，默认为 null（使用视口）

## 注意事项

- 确保目标元素设置了正确的 `position: sticky` 和 `top` 值
- `offset` 参数应该与 CSS 中的 `top` 值保持一致
- Hook 会自动清理哨兵元素和观察器，无需手动处理
