Leon
 /

How to improve internal link navigation with sticky header

Topics
CSS
Published on 
15 Jan 2025

When designing web pages with internal links that navigate to specific sections, developers often encounter issues with fixed or sticky headers. These headers can overlap the content when users click on anchor links, leading to a poor user experience. To address this, the CSS properties scroll-padding-top and scroll-margin-top provide effective solutions.

  • scroll-padding-top: This property is applied to the scroll container (usually the <html> or <body> element) and creates a padding area at the top. When an internal link is clicked, the browser will account for this padding, ensuring that the content is not hidden behind the sticky header.
  • scroll-margin-top: This property is applied to the target elements (sections or headings) and defines a margin above them. When these elements are scrolled into view, this margin creates space between the element and the top of the viewport, preventing overlap with fixed headers.

Differences Between scroll-padding-top and scroll-margin-top

  1. Application Context:
  • scroll-padding-top: Applied to the scroll container. It sets an offset for how far from the top of the container the content should be displayed when scrolled into view.
  • scroll-margin-top: Applied to individual elements (like sections). It specifies how much space should be added above these elements when they snap into view.
  1. Effect on Layout:
  • scroll-padding-top affects the entire scroll area and modifies how all child elements are positioned relative to the top of the viewport.
  • scroll-margin-top only affects specific elements, allowing for more granular control over spacing without impacting other content in the scroll container.

Example of scroll-padding-top

Here’s how to use scroll-padding-top effectively:

1<!DOCTYPE html>
2<html lang="en">
3<head>
4  <title>Scroll Padding Example</title>
5  <style>
6    html {
7      scroll-padding-top: 4rem; /* Creates a padding of 4rem at the top */
8    }
9    nav {
10      height: 3rem;
11      position: sticky;
12      top: 0;
13      background-color: #333;
14    }
15    section {
16      height: 100vh; /* Full viewport height */
17      display: flex;
18      align-items: center;
19      justify-content: center;
20    }
21    #section-1 { background-color: lightcoral; }
22    #section-2 { background-color: lightblue; }
23    #section-3 { background-color: lightgreen; }
24  </style>
25</head>
26<body>
27  <nav>
28    <ul>
29      <li><a href="#section-1">Section 1</a></li>
30      <li><a href="#section-2">Section 2</a></li>
31      <li><a href="#section-3">Section 3</a></li>
32    </ul>
33  </nav>
34
35  <section id="section-1">Section 1</section>
36  <section id="section-2">Section 2</section>
37  <section id="section-3">Section 3</section>
38</body>
39</html>

Example of scroll-margin-top

Here’s how to use scroll-margin-top effectively:

1<!DOCTYPE html>
2<html lang="en">
3<head>
4  <title>Scroll Margin Example</title>
5  <style>
6    nav {
7        height: 3rem;
8        position: sticky;
9        top: 0;
10        background-color: #333;
11    }
12    section {
13      height: 100vh; /* Full viewport height */
14      scroll-margin-top: 4rem; /* Creates a margin of 4rem above each section */
15      display: flex;
16      align-items: center;
17      justify-content: center;
18      font-size: 2rem;
19    }
20    #section-1 { background-color: lightcoral; }
21    #section-2 { background-color: lightblue; }
22    #section-3 { background-color: lightgreen; }
23  </style>
24</head>
25<body>
26  <nav>
27    <ul>
28      <li><a href="#section-1">Section 1</a></li>
29      <li><a href="#section-2">Section 2</a></li>
30      <li><a href="#section-3">Section 3</a></li>
31    </ul>
32  </nav>
33
34  <section id="section-1">Section 1</section>
35  <section id="section-2">Section 2</section>
36  <section id="section-3">Section 3</section>
37</body>
38</html>

Because the height of the sticky header is 3rem, and the margin or padding is 4rem, the section that we navigate to will show up with 1rem extra space under the sticky header.

Conclusion

Both scroll-padding-top and scroll-margin-top are essential tools for improving user experience on web pages with internal links and fixed headers. By understanding their differences and appropriate usage contexts, developers can create seamless navigation experiences that prevent content from being obscured by headers. These properties enhance usability and ensure that users can easily access all parts of a webpage without frustration.