Layout layoutstickysidebar

Sticky Side Column

Main content area with a side column that remains fixed while scrolling.

Long scrolling content...

Keep scrolling to see sticky behavior

Table of Contents
Introduction
Getting Started
Components

Usage

Copy the full block below to use this component with its imports.

astro 
---
import { StickySideColumn } from 'astro-component-kit';
---

<StickySidebarWrapper>Content</StickySidebarWrapper>
--- import { StickySideColumn } from 'astro-component-kit'; --- <StickySidebarWrapper>Content</StickySidebarWrapper>

Manual Installation

If you are not using the npm package, create a new file src/components/lib/StickySideColumn.astro and paste the following code:

astro 
---
---
<div class="stick-lay">
  <main><slot name="main" /></main>
  <aside><slot name="sidebar" /></aside>
</div>
<style>
  .stick-lay { display: grid; grid-template-columns: 1fr 280px; gap: 2rem; }
  aside :global(> *) { position: sticky; top: 100px; }
</style>
--- --- <div class="stick-lay"> <main><slot name="main" /></main> <aside><slot name="sidebar" /></aside> </div> <style> .stick-lay { display: grid; grid-template-columns: 1fr 280px; gap: 2rem; } aside :global(> *) { position: sticky; top: 100px; } </style>

Quick Info

Category
Layout
Filename
StickySideColumn.astro
Dependencies
None — pure Astro + CSS
Tags
layoutstickysidebar