You-Dont-Need-JavaScript/stickyheader/index.html at master · shinevue/You-Dont-Need-JavaScript · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sticky Header Example</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header class="sticky-header">
        <h1>My Sticky Header</h1>
    </header>

    <div class="content">
        <h2>Welcome to the Sticky Header Demo</h2>
        <p>Scroll down to see the header stick to the top of the page.</p>
    </div>

    <div class="long-content">
        <h3>Scrollable Content</h3>
        <p>This is a long content area to demonstrate the sticky header effect. As you scroll, you'll notice that the header at the top remains in place.</p>
        <!-- You can add more paragraphs or content here -->
    </div>
</body>
</html>