93 lines
1.8 KiB
HTML
93 lines
1.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Scroll Snap CSS</title>
|
|
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html, body {
|
|
height: 100%;
|
|
font-family: Arial, sans-serif;
|
|
}
|
|
|
|
/* NAVBAR */
|
|
.navbar {
|
|
position: sticky;
|
|
top: 0;
|
|
height: 80px;
|
|
background: #111;
|
|
color: white;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 10;
|
|
}
|
|
|
|
/* ZONE SCROLLABLE */
|
|
.scroll-container {
|
|
height: calc(100vh - 80px);
|
|
overflow-y: scroll;
|
|
scroll-snap-type: y mandatory;
|
|
}
|
|
|
|
/* SECTIONS */
|
|
.section {
|
|
height: calc(100vh - 80px);
|
|
scroll-snap-align: start;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 3rem;
|
|
}
|
|
|
|
.section-1 {
|
|
height: 150px;
|
|
background: #4caf50;
|
|
}
|
|
|
|
.section-2 {
|
|
background: #2196f3;
|
|
}
|
|
|
|
.section-3 {
|
|
background: red;
|
|
}
|
|
|
|
.section-3 {
|
|
background: yellow;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<nav class="navbar">
|
|
Navbar sticky
|
|
</nav>
|
|
|
|
<main class="scroll-container">
|
|
<section class="section section-1">
|
|
Section 1
|
|
</section>
|
|
|
|
<section class="section section-2">
|
|
Section 2
|
|
</section>
|
|
|
|
<section class="section section-3">
|
|
Section 3
|
|
</section>
|
|
|
|
<section class="section section-4">
|
|
Section 4
|
|
</section>
|
|
</main>
|
|
|
|
</body>
|
|
</html>
|