# Floating Header - Squarespace Plugin

Professional header animation that starts at the bottom of your first section and smoothly floats to the top on scroll.

## ✨ Features

- **Smooth Animation**: Header floats from bottom to top with customizable speed
- **Universal Compatibility**: Works with ANY Squarespace header (7.0 & 7.1)
- **Zero Configuration**: Install and it just works
- **Customizable**: 15+ styling parameters
- **Custom Logo**: Use different logo than your Squarespace site
- **Mobile Responsive**: Adapts to all screen sizes
- **Lightweight**: ~5KB minified

## 📦 Installation

### Basic (Zero Config)

Add to **Settings → Advanced → Code Injection → Footer**:

```html
<script src="https://cdn.jsdelivr.net/gh/clonegarden/squarespaceplugins@latest/floating-header/floating-header.min.js"></script>
```

**That's it!** Header will automatically float from bottom of first section.

---

## ⚙️ Customization

### Styling Parameters

```html
<script src="https://cdn.jsdelivr.net/gh/clonegarden/squarespaceplugins@latest/floating-header/floating-header.min.js?fontSize=18&bgColor=000000&fontColor=FFFFFF"></script>
```

| Parameter | Default | Description | Example |
|-----------|---------|-------------|---------|
| `fontSize` | Auto | Font size in px | `?fontSize=18` |
| `fontFamily` | Auto | Font family name | `?fontFamily=Helvetica` |
| `fontWeight` | Auto | Font weight (100-900) | `?fontWeight=600` |
| `fontColor` | Auto | Text color (hex without #) | `?fontColor=FFFFFF` |
| `bgColor` | Auto | Background color | `?bgColor=000000` |

### Logo Parameters

| Parameter | Default | Description | Example |
|-----------|---------|-------------|---------|
| `customLogo` | Site logo | URL of custom logo | `?customLogo=https://...` |
| `logoWidth` | Auto | Logo width in px | `?logoWidth=150` |
| `logoHeight` | Auto | Logo height in px | `?logoHeight=50` |

### Behavior Parameters

| Parameter | Default | Description | Example |
|-----------|---------|-------------|---------|
| `transitionSpeed` | `600` | Animation speed (ms) | `?transitionSpeed=800` |
| `stickyTop` | `0` | Top offset when sticky (px) | `?stickyTop=20` |
| `startAtBottom` | `true` | Start at bottom vs top | `?startAtBottom=false` |
| `teleport` | `true` | Enable teleport animation mode | `?teleport=false` |
| `stickyBottom` | `false` | Stick header at bottom of viewport | `?stickyBottom=true` |
| `fade` | `false` | Replace slide with fade-out/fade-in | `?fade=true` |
| `noTransition` | `false` | Disable all transitions (overrides fade) | `?noTransition=true` |
| `zIndex` | `9999` | Z-index value | `?zIndex=10000` |
| `debug` | `false` | Enable console logging | `?debug=true` |

---

## 🎨 Examples

### Example 1: Dark Header with Custom Font

```html
<script src="...?bgColor=1a1a1a&fontColor=FFFFFF&fontFamily=Montserrat&fontSize=16"></script>
```

### Example 2: Transparent Header

```html
<script src="...?bgColor=transparent&fontColor=000000"></script>
```

### Example 3: Custom Logo

```html
<script src="...?customLogo=https://example.com/logo.png&logoWidth=200&logoHeight=60"></script>
```

### Example 4: Fast Animation

```html
<script src="...?transitionSpeed=300"></script>
```

### Example 5: Start Sticky (No Float)

```html
<script src="...?startAtBottom=false"></script>
```

### Example 6: Natural Sticky Mode (No Teleport)

```html
<script src="...?teleport=false"></script>
```

The header starts at the bottom of the first section and scrolls naturally with the page.
When it reaches the top of the viewport, it sticks there — no disappearing or teleport animation.

### Example 7: Fade Animation

```html
<script src="...?fade=true"></script>
```

Instead of sliding between positions, the header fades out, switches position instantly, then fades back in.

### Example 8: No Transition (Instant Switch)

```html
<script src="...?noTransition=true"></script>
```

All CSS transitions are disabled. The header switches positions instantly with no animation.
If both `fade` and `noTransition` are set, `noTransition` wins.

### Example 9: Sticky at Bottom of Viewport

```html
<script src="https://cdn.jsdelivr.net/gh/clonegarden/squarespaceplugins@latest/floating-header/floating-header.min.js?teleport=false&stickyBottom=true"></script>
```

The header starts at the bottom of the first section and scrolls naturally with the page.
When it reaches the bottom of the viewport, it sticks there — acting as a persistent bottom navigation bar.

Also works with teleport mode (header teleports to the bottom of the viewport on scroll):

```html
<script src="https://cdn.jsdelivr.net/gh/clonegarden/squarespaceplugins@latest/floating-header/floating-header.min.js?stickyBottom=true"></script>
```

---

## 🎯 How It Works

### Visual Flow

#### Default (header sticks at top of viewport)

```
PAGE LOAD
┌─────────────────────────────────────┐
│  SECTION 1 (Hero/Banner)             │
│                                      │
│  [Your content here]                 │
│                                      │
│  ┌─────────────────────────────┐   │ ← Header at BOTTOM
│  │ LOGO  Home  About  Contact  │   │
│  └─────────────────────────────┘   │
└─────────────────────────────────────┘
             ⬇ User scrolls ⬇
┌─────────────────────────────────────┐
│ LOGO  Home  About  Contact          │ ← Header STICKY at TOP
├─────────────────────────────────────┤
│  SECTION 2                           │
│  [Content]                           │
└─────────────────────────────────────┘
```

#### With `stickyBottom=true` (header sticks at bottom of viewport)

```
PAGE LOAD
┌─────────────────────────────────────┐
│  SECTION 1 (Hero/Banner)            │
│  [Your hero content]                │
│  ┌─────────────────────────────┐    │ ← Header at BOTTOM of Section 1
│  │ LOGO  Home  About  Contact  │    │
│  └─────────────────────────────┘    │
└─────────────────────────────────────┘
             ⬇ User scrolls ⬇
┌─────────────────────────────────────┐
│  SECTION 2                          │
│  [Content]                          │
│                                     │
├─────────────────────────────────────┤
│ LOGO  Home  About  Contact          │ ← Sticky at BOTTOM of viewport
└─────────────────────────────────────┘
```

### Technical Details

#### Teleport Mode (`teleport=true`, default)

1. **Detects** first section automatically (no IDs needed)
2. **Wraps** existing Squarespace header
3. **Positions** at bottom of section 1 (absolute positioning)
4. **Monitors** scroll position
5. **Animates** to sticky top when user scrolls past section 1 (or sticky bottom when `stickyBottom=true`)
6. **Reverses** animation when scrolling back up

#### Natural Sticky Mode (`teleport=false`)

1. **Detects** first section automatically (no IDs needed)
2. **Wraps** existing Squarespace header
3. **Inserts** wrapper inside the first section (at the bottom via flex layout)
4. **Uses** CSS `position: sticky` — header scrolls naturally with the page
5. **Sticks** to top when the header reaches the top of the viewport (or to bottom when `stickyBottom=true`)
6. No scroll JavaScript needed — browser handles sticking natively

---

## 🐛 Troubleshooting

### Header Not Appearing

1. Check browser console for errors
2. Enable debug mode: `?debug=true`
3. Verify header exists in Squarespace template

### Animation Not Smooth

1. Increase `transitionSpeed`: `?transitionSpeed=800`
2. Check for CSS conflicts
3. Disable other header-modifying plugins

### Logo Not Changing

1. Verify `customLogo` URL is accessible
2. Use full HTTPS URL (not relative path)
3. Check image file size (< 500KB recommended)

### Mobile Issues

1. Header automatically scales on mobile
2. Check mobile preview in Squarespace
3. Adjust `fontSize` if needed

---

## 📱 Browser Support

- ✅ Chrome/Edge (latest)
- ✅ Firefox (latest)
- ✅ Safari (latest)
- ✅ Mobile Safari (iOS)
- ✅ Chrome Mobile (Android)
- ✅ Squarespace 7.0 & 7.1

---

## 🔐 Licensing

This plugin requires a commercial license from Anavo Tech.

- ✅ **Development**: Free on `localhost` and `*.squarespace.com`
- 💰 **Production**: Purchase at [anavo.tech/plugins](https://anavo.tech/plugins)

### License Tiers

| Tier | Price | Domains |
|------|-------|---------|
| Individual | $29/year | 1 domain |
| Agency | $79/year | 5 domains |
| Enterprise | $199/year | Unlimited |

---

## 🆘 Support

- 📧 **Email**: hello@anavo.tech
- 🐛 **Bug Reports**: [GitHub Issues](https://github.com/clonegarden/squarespaceplugins/issues)
- 📚 **Documentation**: [Full Docs](https://anavo.tech/docs/floating-header)

---

## 📄 License

Commercial - See [LICENSE.md](../LICENSE.md)

**© 2026 Anavo Tech. All rights reserved.**