[evo4532] 202608242014

2026-08-24 20:14:23 +02:00
parent ef705874b1
commit 3bd5942f7e
3 changed files with 329 additions and 0 deletions
@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+    <meta charset="UTF-8">
+    <title>Scroll Snap avec Header Scrollable</title>
+    <style>
+        html, body {
+            margin: 0;
+            font-family: Arial, sans-serif;
+            height: 100%;
+
+            /* Scroll snap global */
+            scroll-snap-type: y mandatory;
+            overflow-y: scroll;
+        }
+
+        header {
+            height: 120px;
+            background-color: #34495e;
+            color: white;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+
+            scroll-snap-align: start;
+        }
+
+        nav {
+            height: 80px;
+            background-color: #2ecc71;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+
+            position: sticky;
+            top: 0;
+            z-index: 10;
+        }
+
+        section {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 2rem;
+
+            scroll-snap-align: start;
+            scroll-margin-top: 80px;
+        }
+
+        .section-1 {
+            background-color: #ecf0f1;
+            min-height: 200px;
+        }
+
+        .section-2 {
+           background-color: #bdc3c7;
+           height: calc(100vh - 80px);
+        }
+
+        .section-3 {
+            background-color: #95a5a6;
+            min-height: 200vh;
+        }
+
+    </style>
+</head>
+<body>
+
+    <header>
+        <h1>Header (120px)</h1>
+    </header>
+
+    <nav>
+        <strong>Navbar sticky (80px)</strong>
+    </nav>
+
+    <section class="section-1">Section 1</section>
+    <section class="section-2">Section 2</section>
+    <section class="section-3">Section 3</section>
+
+</body>
+</html>
+