-
Notifications
You must be signed in to change notification settings - Fork 0
/
notes5.html
267 lines (267 loc) · 15.6 KB
/
notes5.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
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Bootstrap demo</title>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@4.1.3/dist/css/bootstrap.min.css"
integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin="anonymous"
/>
</head>
<style>
body {
background-color: lightcoral;
color: black;
}
p {
font-size: 30px;
}
</style>
<body>
<nav class="navbar navbar-light bg-light" id="mainNavbar">
<a href="" class="navbar-brand">Scrollspy</a>
<ul class="nav nav-pills">
<li class="nav-item">
<a href="#about" class="nav-link">About</a>
</li>
<li class="nav-item">
<a href="#contact" class="nav-link">Contact</a>
</li>
<li class="nav-item">
<a href="#help" class="nav-link">Help</a>
</li>
<li class="nav-item">
<a href="#blog" class="nav-link">Blog</a>
</li>
<li class="nav-item">
<a href="#random" class="nav-link">Random</a>
</li>
</ul>
</nav>
<h1 class="d-flex justify-content-center mb-5">Notes 5</h1>
<h2 class="d-flex display-3 justify-content-center mt-2">
<u>ScrollSpy</u>
</h2>
<p>Scrollspy changes</p>
<div
data-spy="scroll"
data-target="#mainNavbar"
class="container mt-4"
style="position: relative; overflow-y: scroll; height: 500px"
>
<h2 id="about">About</h2>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Amet eaque
atque voluptatum? Nostrum animi pariatur, deleniti tenetur eveniet,
velit quam iste optio aperiam nobis quo officia veniam eos ut
praesentium harum veritatis ipsa, eum et? Dolorem natus, ipsam totam
corrupti veritatis, distinctio officia provident quae voluptatem cumque
reprehenderit, officiis voluptatibus accusamus. Natus sit reprehenderit
iure, corrupti pariatur odio voluptatum vitae, esse porro dolorum fugit
quam error ea vero iste ipsum harum neque id dolorem voluptate
laboriosam reiciendis officiis. Error ea, perferendis neque facilis a
vel, reiciendis modi nulla amet voluptates maiores, similique ipsum ipsa
nemo corrupti? Corporis fugiat error officia! Lorem ipsum dolor sit
amet, consectetur adipisicing elit. Recusandae odio dolorum nemo commodi
dolor adipisci rem iste ipsam soluta eum, fuga at. Autem officiis unde
dignissimos vitae! Neque necessitatibus nobis nulla dignissimos. Facilis
error quae adipisci laboriosam cupiditate? Iure eligendi culpa quam
veniam quas velit! Nesciunt, eum laudantium, animi nulla nemo distinctio
esse magni maiores doloribus quae placeat. Fugit tenetur numquam totam
impedit ullam eveniet pariatur, labore architecto illum. Culpa, neque
natus incidunt recusandae, fuga animi quo nemo deserunt ipsa inventore
obcaecati sunt itaque rem voluptates adipisci reiciendis officiis
provident alias minus. Odit tenetur culpa reprehenderit architecto,
dolorem ut fuga minus quia adipisci deserunt eum. Nihil mollitia
nostrum, dolore reiciendis dolores iure vitae dignissimos tempora
deserunt quos neque, beatae natus veritatis inventore explicabo
assumenda, quasi autem odio voluptatem illum qui excepturi. Facere porro
inventore eius quibusdam illum possimus tempore nemo consectetur, quae
ut repellendus deleniti. Quos esse dignissimos, unde harum ad quaerat?
Molestias illo dignissimos expedita! Ipsa qui, rem accusamus accusantium
incidunt quam provident commodi ducimus unde expedita, explicabo quis
esse mollitia! Delectus fugiat consequuntur deleniti nesciunt numquam,
ab nihil itaque, ad fuga nisi iusto, tempora incidunt dolorem facilis
est odio. Laborum eaque aliquid dicta aperiam animi eveniet perferendis
amet.
</p>
<h2 id="contact">Contact</h2>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Amet eaque
atque voluptatum? Nostrum animi pariatur, deleniti tenetur eveniet,
velit quam iste optio aperiam nobis quo officia veniam eos ut
praesentium harum veritatis ipsa, eum et? Dolorem natus, ipsam totam
corrupti veritatis, distinctio officia provident quae voluptatem cumque
reprehenderit, officiis voluptatibus accusamus. Natus sit reprehenderit
iure, corrupti pariatur odio voluptatum vitae, esse porro dolorum fugit
quam error ea vero iste ipsum harum neque id dolorem voluptate
laboriosam reiciendis officiis. Error ea, perferendis neque facilis a
vel, reiciendis modi nulla amet voluptates maiores, similique ipsum ipsa
nemo corrupti? Corporis fugiat error officia! Lorem ipsum dolor sit amet
consectetur adipisicing elit. Vel cupiditate, ullam ad, alias aperiam
fuga at inventore aliquam sapiente harum officia a nulla illum obcaecati
ratione, sit molestiae ipsam provident optio facere enim! Natus, minus
doloremque, et nihil magni aut aspernatur soluta alias sunt earum,
provident iure! Cumque molestias repellat quibusdam sint beatae. Iure
nesciunt id in atque ea sit, possimus magni labore quas sequi quasi,
assumenda ipsum maiores dolore accusamus, quod culpa repellendus debitis
laboriosam laudantium at voluptatum tempora ullam? Quaerat deleniti,
enim, corporis autem, dignissimos facere suscipit iste sint error fuga
expedita vel! Unde doloribus quisquam provident neque itaque nam atque
facilis dolor maiores! Aliquid molestias voluptate deserunt ducimus
accusantium quisquam repudiandae exercitationem eum sint? Suscipit,
assumenda repudiandae in illo distinctio fugit ipsum accusantium,
voluptas ratione ab aperiam quisquam nulla nam qui quam deserunt quidem
beatae molestiae ut sunt necessitatibus? Adipisci consectetur itaque
aliquid, unde magnam doloribus sint suscipit quidem provident expedita
incidunt ex omnis dolor id beatae. Porro sit facere, voluptate quisquam
excepturi, asperiores optio ea nihil distinctio fugiat eos quos
cupiditate, dolorum voluptas voluptatum perferendis repellat minima
dignissimos consectetur. Nemo enim unde eius a, eaque quaerat tempora
dolorum accusantium odit reiciendis qui, sequi nihil ipsam tenetur?
</p>
<h2 id="help">Help</h2>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Amet eaque
atque voluptatum? Nostrum animi pariatur, deleniti tenetur eveniet,
velit quam iste optio aperiam nobis quo officia veniam eos ut
praesentium harum veritatis ipsa, eum et? Dolorem natus, ipsam totam
corrupti veritatis, distinctio officia provident quae voluptatem cumque
reprehenderit, officiis voluptatibus accusamus. Natus sit reprehenderit
iure, corrupti pariatur odio voluptatum vitae, esse porro dolorum fugit
quam error ea vero iste ipsum harum neque id dolorem voluptate
laboriosam reiciendis officiis. Error ea, perferendis neque facilis a
vel, reiciendis modi nulla amet voluptates maiores, similique ipsum ipsa
nemo corrupti? Corporis fugiat error officia! Lorem ipsum dolor sit
amet, consectetur adipisicing elit. Perferendis voluptatem consectetur
in ea magnam tenetur nemo sapiente architecto, quo, mollitia praesentium
vero natus dolorum pariatur maiores ipsa. Reiciendis, in beatae dolorum
sequi ipsam perspiciatis earum facilis esse eius laudantium nam quasi
labore ipsum sunt incidunt distinctio recusandae laboriosam sed
obcaecati repellendus ipsa? Quas itaque unde eveniet totam impedit
expedita nisi nemo laborum asperiores nesciunt, minima quam corrupti
doloremque vel officia eos, repellat ab ex ipsam? Esse rem iusto
consequuntur cum, facere reprehenderit ratione corrupti dolorum qui
maxime totam hic est exercitationem, consectetur odio ipsam distinctio
nesciunt, commodi tenetur excepturi fuga. Quis nobis ab odio ratione.
Magnam esse voluptates animi in voluptatem dolorum est fugiat suscipit
sint laborum facere, ab commodi repellendus aperiam beatae fuga vero
enim! Minima iste in laudantium dolores. Illo dicta nostrum expedita ea,
vel quasi! Ab accusantium exercitationem beatae, at molestiae
praesentium optio necessitatibus illo, perferendis dolore ratione
officiis tenetur laudantium sequi ipsa ex? Magni, a alias est magnam
soluta modi odit. Dignissimos provident quod ad officiis consequuntur
at, in, quis ducimus mollitia quaerat blanditiis earum! Saepe, numquam
illum ipsam laudantium commodi necessitatibus ratione repellendus ab non
quis voluptates sapiente, sit itaque nemo? Repellendus esse corporis
eaque.
</p>
<h2 id="blog">Blog</h2>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Amet eaque
atque voluptatum? Nostrum animi pariatur, deleniti tenetur eveniet,
velit quam iste optio aperiam nobis quo officia veniam eos ut
praesentium harum veritatis ipsa, eum et? Dolorem natus, ipsam totam
corrupti veritatis, distinctio officia provident quae voluptatem cumque
reprehenderit, officiis voluptatibus accusamus. Natus sit reprehenderit
iure, corrupti pariatur odio voluptatum vitae, esse porro dolorum fugit
quam error ea vero iste ipsum harum neque id dolorem voluptate
laboriosam reiciendis officiis. Error ea, perferendis neque facilis a
vel, reiciendis modi nulla amet voluptates maiores, similique ipsum ipsa
nemo corrupti? Corporis fugiat error officia! Lorem ipsum dolor sit amet
consectetur, adipisicing elit. Magnam ut alias laborum voluptatem
architecto tempore quas sint possimus inventore illum cum beatae sed rem
veritatis velit fuga perspiciatis molestiae expedita magni eaque,
asperiores voluptatum excepturi totam id. Necessitatibus dolore quos nam
molestiae deserunt odit consectetur, perferendis commodi nisi ea ad rem
ratione voluptates id temporibus blanditiis fugit eum ullam ut sunt
animi quisquam. Optio accusamus sunt corrupti similique, nesciunt itaque
ipsum omnis autem maxime delectus atque praesentium? Omnis ratione
tenetur aliquam, quod autem atque dolore obcaecati voluptates animi et
ullam, ipsam molestiae cumque est, culpa sunt repellat libero nam porro.
Vero quos officiis deleniti enim, tempore accusamus provident. Rerum,
voluptatem voluptatibus! Eius neque quod, ab pariatur velit ex quos vel
inventore, aspernatur doloribus quisquam rem totam? Nobis in
exercitationem ad enim magni tenetur vero aliquid, voluptates,
perferendis ullam ducimus dicta error incidunt nihil debitis maxime
labore quaerat temporibus cumque! Nobis non temporibus deserunt! Eum
quibusdam suscipit aspernatur vitae architecto odio quam id est officia
distinctio fugiat, veritatis neque nisi quo vero animi tenetur,
similique earum quas commodi voluptate, nostrum ex eaque facere.
Dignissimos nam quis qui quibusdam harum ut. Maiores laborum facilis
aliquid, labore eveniet cupiditate ipsam ducimus repellat eius.
</p>
<h2 id="random"></h2>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nesciunt in
praesentium aperiam mollitia a tempora corporis libero repellendus, ab
deleniti facilis temporibus modi cupiditate voluptatem iusto iste
asperiores sapiente sequi nobis itaque excepturi harum distinctio vero.
Beatae voluptas id libero tenetur maxime iste officiis totam magni ea
aliquam facere voluptate architecto non dolor omnis minus perspiciatis
ipsa aperiam quod, asperiores ullam placeat. Cumque nisi assumenda
delectus? A itaque incidunt velit illo aliquid corrupti placeat veniam
inventore, error laboriosam maiores sapiente est commodi quisquam
aliquam aspernatur porro minus ea pariatur saepe non doloribus veritatis
tempore ratione. Ex deserunt ipsa incidunt illo vero est magni non illum
explicabo eligendi ipsam, cupiditate itaque ducimus iusto porro tempore
nemo sunt molestiae sapiente odio accusantium blanditiis! Commodi in
alias at dicta adipisci voluptates exercitationem, fuga neque ad esse
non aperiam maxime autem asperiores consequuntur nam minima beatae
eaque, ipsam nostrum perspiciatis officiis! Asperiores est quibusdam
laborum quis modi minima voluptatum nobis perferendis consequatur magnam
incidunt illum, aperiam eveniet atque tenetur maiores explicabo
assumenda beatae tempore quasi deleniti sapiente libero cum? Iste
deserunt iure nobis ipsum adipisci, itaque perferendis repudiandae
maxime quos soluta repellendus ex dicta ipsam alias inventore natus
officia mollitia beatae! Suscipit laudantium iure consectetur eum
consequuntur harum. Accusantium, pariatur aperiam. Recusandae
praesentium dolorum neque error adipisci, fugiat odit facilis, officiis
a quaerat est quis architecto consequuntur! Facere, consectetur
cupiditate. Inventore asperiores, facilis voluptates delectus qui iusto
nostrum similique magni omnis vitae voluptate nesciunt iste sunt fugit
maiores molestias tempore porro? Fugit quis reiciendis minus alias
laboriosam neque, necessitatibus enim amet doloremque possimus illo iure
nesciunt quae asperiores provident, porro hic autem. Nulla ab ex
perferendis laborum velit deleniti, pariatur eum, corrupti, delectus
quaerat neque maiores rerum totam quod! Non nihil, tenetur, quaerat
error eveniet illum adipisci consequuntur libero, repellat eius soluta
ullam et similique beatae hic sed in maiores aliquid quia pariatur
voluptatibus ut. Nesciunt aspernatur, fugiat aut recusandae reiciendis
magnam sit quae quod perferendis alias pariatur labore velit at hic,
assumenda doloribus ipsa! Asperiores earum, dolorum officiis odit sed
explicabo amet culpa modi tenetur alias optio at rem inventore
laudantium voluptas magni deserunt. Ea dolorem eligendi architecto, eius
voluptatem rerum quam quaerat magni hic placeat recusandae a dicta
officiis temporibus animi, veniam, fuga eveniet in tempore quisquam
totam! Nemo ducimus inventore eum nisi consequuntur iusto non! Quaerat
harum magni mollitia velit, ex amet impedit officia, dolor tenetur
doloremque delectus in, minus consequatur.
</p>
</div>
<div class="container mt-5">
<h2 class="d-flex justify-content-center">
That's it for scrollspy, the official docs have other examples of how to
use it
</h2>
</div>
<script
src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/popper.js@1.14.3/dist/umd/popper.min.js"
integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@4.1.3/dist/js/bootstrap.min.js"
integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin="anonymous"
></script>
</body>
</html>