-
Notifications
You must be signed in to change notification settings - Fork 4
Expand file tree
/
Copy pathscrollspy.html
More file actions
62 lines (57 loc) · 6.79 KB
/
scrollspy.html
File metadata and controls
62 lines (57 loc) · 6.79 KB
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
55
56
57
58
59
60
61
62
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Bootstrap Hcode</title>
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/style.css">
<style>
#scrollspy-content {
position:relative;
overflow-y: auto;
height:calc(100vh - 120px);
}
</style>
</head>
<body>
<div class="container">
<nav id="navbar-example2" class="navbar navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link" href="#fat">@fat</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#mdo">@mdo</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true"
aria-expanded="false">Dropdown</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#one">one</a>
<a class="dropdown-item" href="#two">two</a>
<div role="separator" class="dropdown-divider"></div>
<a class="dropdown-item" href="#three">three</a>
</div>
</li>
</ul>
</nav>
<div id="scrollspy-content" data-spy="scroll" data-target="#navbar-example2" data-offset="0">
<h4 id="fat">@fat</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos amet deserunt inventore alias in, consequatur eveniet pariatur libero hic corporis reprehenderit harum perspiciatis eaque laudantium ipsam facere magnam rerum. Illum! Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos amet deserunt inventore alias in, consequatur eveniet pariatur libero hic corporis reprehenderit harum perspiciatis eaque laudantium ipsam facere magnam rerum. Illum! Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos amet deserunt inventore alias in, consequatur eveniet pariatur libero hic corporis reprehenderit harum perspiciatis eaque laudantium ipsam facere magnam rerum. Illum! Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos amet deserunt inventore alias in, consequatur eveniet pariatur libero hic corporis reprehenderit harum perspiciatis eaque laudantium ipsam facere magnam rerum. Illum!</p>
<h4 id="mdo">@mdo</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos amet deserunt inventore alias in, consequatur eveniet pariatur libero hic corporis reprehenderit harum perspiciatis eaque laudantium ipsam facere magnam rerum. Illum! Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos amet deserunt inventore alias in, consequatur eveniet pariatur libero hic corporis reprehenderit harum perspiciatis eaque laudantium ipsam facere magnam rerum. Illum! Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos amet deserunt inventore alias in, consequatur eveniet pariatur libero hic corporis reprehenderit harum perspiciatis eaque laudantium ipsam facere magnam rerum. Illum! Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos amet deserunt inventore alias in, consequatur eveniet pariatur libero hic corporis reprehenderit harum perspiciatis eaque laudantium ipsam facere magnam rerum. Illum!</p>
<h4 id="one">one</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos amet deserunt inventore alias in, consequatur eveniet pariatur libero hic corporis reprehenderit harum perspiciatis eaque laudantium ipsam facere magnam rerum. Illum! Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos amet deserunt inventore alias in, consequatur eveniet pariatur libero hic corporis reprehenderit harum perspiciatis eaque laudantium ipsam facere magnam rerum. Illum! Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos amet deserunt inventore alias in, consequatur eveniet pariatur libero hic corporis reprehenderit harum perspiciatis eaque laudantium ipsam facere magnam rerum. Illum! Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos amet deserunt inventore alias in, consequatur eveniet pariatur libero hic corporis reprehenderit harum perspiciatis eaque laudantium ipsam facere magnam rerum. Illum!</p>
<h4 id="two">two</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos amet deserunt inventore alias in, consequatur eveniet pariatur libero hic corporis reprehenderit harum perspiciatis eaque laudantium ipsam facere magnam rerum. Illum! Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos amet deserunt inventore alias in, consequatur eveniet pariatur libero hic corporis reprehenderit harum perspiciatis eaque laudantium ipsam facere magnam rerum. Illum! Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos amet deserunt inventore alias in, consequatur eveniet pariatur libero hic corporis reprehenderit harum perspiciatis eaque laudantium ipsam facere magnam rerum. Illum! Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos amet deserunt inventore alias in, consequatur eveniet pariatur libero hic corporis reprehenderit harum perspiciatis eaque laudantium ipsam facere magnam rerum. Illum!</p>
<h4 id="three">three</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos amet deserunt inventore alias in, consequatur eveniet pariatur libero hic corporis reprehenderit harum perspiciatis eaque laudantium ipsam facere magnam rerum. Illum! Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos amet deserunt inventore alias in, consequatur eveniet pariatur libero hic corporis reprehenderit harum perspiciatis eaque laudantium ipsam facere magnam rerum. Illum! Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos amet deserunt inventore alias in, consequatur eveniet pariatur libero hic corporis reprehenderit harum perspiciatis eaque laudantium ipsam facere magnam rerum. Illum! Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos amet deserunt inventore alias in, consequatur eveniet pariatur libero hic corporis reprehenderit harum perspiciatis eaque laudantium ipsam facere magnam rerum. Illum!</p>
</div>
</div>
<script src="node_modules/jquery/dist/jquery.min.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>