Merge pull request #479 from VidhiyaSB/master

Sticky Headers
you-dont-need · Oct 4, 2024 · 82265b3 · 82265b3
2 parents 630ca32 + f73a59b
commit 82265b3
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 0 deletions.
diff --git a/stickyheader/index.html b/stickyheader/index.html
@@ -0,0 +1,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>
diff --git a/stickyheader/output.jpg b/stickyheader/output.jpg
diff --git a/stickyheader/style.css b/stickyheader/style.css
@@ -0,0 +1,30 @@
+body {
+    margin: 0;
+    font-family: Arial, sans-serif;
+    line-height: 1.6;
+}
+
+.sticky-header {
+    position: sticky;
+    top: 0;
+    background-color: #333;
+    color: #fff;
+    padding: 20px;
+    z-index: 100;
+}
+
+.sticky-header h1 {
+    margin: 0;
+}
+
+.content {
+    padding: 20px;
+}
+
+/* Adding more content to ensure scrolling */
+.long-content {
+    height: 2000px;
+    background: linear-gradient(to bottom, #f1f1f1, #ddd);
+    padding: 20px;
+    margin-top: 20px;
+}