Position fixed and sticky in CSS - Mini Project: Build & Apply

Position Fixed and Sticky in CSS

📖 Scenario: You are creating a simple webpage with a header and a sidebar. You want the header to stay visible at the top of the page when you scroll down. You also want the sidebar to stick to the top of the viewport only after you scroll past it.

🎯 Goal: Build a webpage where the header uses position: fixed to stay at the top always, and the sidebar uses position: sticky so it sticks to the top only after scrolling past it.

📋 What You'll Learn

Create a header element with fixed position at the top

Create a sidebar element with sticky position and top offset

Use CSS to style the header and sidebar with background colors and padding

Ensure the main content scrolls behind the fixed header

Make the sidebar stick only after scrolling past its original position

💡 Why This Matters

🌍 Real World

Fixed headers and sticky sidebars are common in websites to keep navigation or important info visible while scrolling.

💼 Career

Web developers often use fixed and sticky positioning to improve user experience and site navigation.

1

Create the HTML structure

Write the HTML code to create a <header> with text 'My Fixed Header', a <aside> with text 'Sticky Sidebar', and a <main> with some placeholder paragraphs. Use semantic tags exactly as named.

CSS

My Fixed Header
Sticky Sidebar

  Paragraph 1
  Paragraph 2
  Paragraph 3
  

Need a hint?

Use semantic HTML tags: <header>, <aside>, and <main>. Add some paragraphs inside <main> for scrolling.

2

Add basic CSS styles and fixed header

Add CSS to style the header with position: fixed, top: 0, full width, background color #333, white text color, and padding 1rem. Also add margin-top to main so content is not hidden behind the fixed header.

CSS

header {
  /* Add fixed position and styles here */
}

main {
  /* Add margin-top to avoid content behind header */
}


My Fixed Header
Sticky Sidebar

  Paragraph 1
  Paragraph 2
  Paragraph 3
  Paragraph 4
  Paragraph 5
  Paragraph 6
  Paragraph 7
  Paragraph 8
  Paragraph 9
  Paragraph 10

Need a hint?

Use position: fixed and top: 0 on header. Add margin-top on main to push content below the header.

3

Add sticky sidebar styles

Add CSS to style the aside with position: sticky, top: 3.5rem so it sticks below the fixed header, background color #eee, padding 1rem, and a border 1px solid #ccc.

CSS

header {
  position: fixed;
  top: 0;
  width: 100%;
  background-color: #333;
  color: white;
  padding: 1rem;
  z-index: 1000;
}

main {
  margin-top: 3.5rem;
}

aside {
  /* Add sticky position and styles here */
}


My Fixed Header
Sticky Sidebar

  Paragraph 1
  Paragraph 2
  Paragraph 3
  Paragraph 4
  Paragraph 5
  Paragraph 6
  Paragraph 7
  Paragraph 8
  Paragraph 9
  Paragraph 10

Need a hint?

Use position: sticky and top: 3.5rem on aside. Add background color, padding, and border for clarity.

4

Complete layout with sidebar and main content side by side

Wrap the aside and main inside a <section> with CSS using display: flex and gap: 1rem. Add padding 1rem to the section. This will place the sticky sidebar and main content side by side.

CSS

header {
  position: fixed;
  top: 0;
  width: 100%;
  background-color: #333;
  color: white;
  padding: 1rem;
  z-index: 1000;
}

section {
  /* Add flex display and gap here */
}

main {
  margin-top: 3.5rem;
  /* Remove margin-top if needed */
  flex: 1;
}

aside {
  position: sticky;
  top: 3.5rem;
  background-color: #eee;
  padding: 1rem;
  border: 1px solid #ccc;
  max-width: 200px;
}


My Fixed Header

  Sticky Sidebar
  
    Paragraph 1
    Paragraph 2
    Paragraph 3
    Paragraph 4
    Paragraph 5
    Paragraph 6
    Paragraph 7
    Paragraph 8
    Paragraph 9
    Paragraph 10
  

Need a hint?

Wrap aside and main inside a <section>. Use display: flex and gap: 1rem on section. Add padding and margin-top to separate from header.