-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathScrollspy.html
54 lines (40 loc) · 2.3 KB
/
Scrollspy.html
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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="bootstrap.min.css">
<script src="bootstrap.bundle.min.js"></script>
</head>
<body data-bs-spy="scroll" data-bs-target=".navbar" data-bs-offset="50">
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
<div class="container-fluid">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#section1">Section1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#section2">Section2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#section3">Section3</a>
</li>
</ul>
</div>
</nav>
<div id="section1" class="container-fluid bg-success text-white" style="padding:100px 20px;">
<h1>Section 1</h1>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quod numquam sapiente voluptatibus iure quae deserunt accusantium et, ullam temporibus suscipit. Esse unde atque laborum consequuntur harum, itaque similique inventore id!</p>
</div>
<div id="section2" class="container-fluid bg-warning" style="padding:100px 20px">
<h2> Section2</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa sint unde debitis voluptatem, reiciendis laudantium quis illum itaque iure fugit ex ipsa, possimus cumque sapiente aliquid eum est assumenda! Facere.</p>
</div>
<div id="section3" class="container-fluid bg-danger" style="padding:100px 20px">
<h2> Section3</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa sint unde debitis voluptatem, reiciendis laudantium quis illum itaque iure fugit ex ipsa, possimus cumque sapiente aliquid eum est assumenda! Facere. Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo maxime, provident molestias possimus, quia magni iusto aliquam nihil sapiente voluptate quasi voluptates vitae accusamus illum quo. Facere, ea explicabo! Assumenda.</p>
</div>
</body>
</html>