-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
131 lines (118 loc) · 16.5 KB
/
index.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
<!doctype html>
<title>ScrollSpy Demo</title>
<script src="scrollspy.js"></script>
<script>
new ScrollSpy({
blockSelector: function() {
return 'article';
},
linkSelector: function(id) {
return 'nav a[href="#'+id+'"]';
}
});
</script>
<style>
body {
width: 400px;
padding-top: 2.4em;
margin: 0 auto;
}
nav {
position: fixed;
top: 0;
background: rgba(0,0,0,.8);
width: 400px;
}
nav a {
padding: 10px;
display: inline-block;
}
section {
background: black;
color: white;
padding: 1em;
}
section a {
font-weight: bold;
}
a {
color: yellow;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a.active {
background: orangered;
}
article { padding: 1em; }
#chapter-one { background: #eee; }
#chapter-two { background: #ddd; }
#chapter-three { background: #ccc; }
#chapter-four { background: #bbb; }
#chapter-five { background: #aaa; }
#chapter-six { background: #999; }
</style>
<nav>
<a href="#chapter-one">One</a>
<a href="#chapter-two">Two</a>
<a href="#chapter-three">Three</a>
<a href="#chapter-four">Four</a>
<a href="#chapter-five">Five</a>
<a href="#chapter-six">Six</a>
</nav>
<section>
<p>
This is a demonstration of <a href="https://github.com/Radweb/ScrollSpy">ScrollSpy</a>.
</p>
</section>
<article id="chapter-one">
<h3>Chapter One</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam mattis malesuada sapien at pretium. Vestibulum placerat neque at sapien sagittis, a faucibus mauris efficitur. Fusce accumsan vitae ex ut lobortis. Cras tincidunt nisi turpis, luctus suscipit nisi rhoncus id. Duis id nibh vitae mi dapibus dapibus. Mauris nec nisl tellus. Nam ac ultrices diam, ut mattis felis. Ut tortor tortor, suscipit eu elit facilisis, egestas commodo massa. Maecenas nec dolor ut est porttitor dictum. Nam vitae elit accumsan, mollis metus eu, hendrerit tortor.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam mattis malesuada sapien at pretium. Vestibulum placerat neque at sapien sagittis, a faucibus mauris efficitur. Fusce accumsan vitae ex ut lobortis. Cras tincidunt nisi turpis, luctus suscipit nisi rhoncus id. Duis id nibh vitae mi dapibus dapibus. Mauris nec nisl tellus. Nam ac ultrices diam, ut mattis felis. Ut tortor tortor, suscipit eu elit facilisis, egestas commodo massa. Maecenas nec dolor ut est porttitor dictum. Nam vitae elit accumsan, mollis metus eu, hendrerit tortor.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam mattis malesuada sapien at pretium. Vestibulum placerat neque at sapien sagittis, a faucibus mauris efficitur. Fusce accumsan vitae ex ut lobortis. Cras tincidunt nisi turpis, luctus suscipit nisi rhoncus id. Duis id nibh vitae mi dapibus dapibus. Mauris nec nisl tellus. Nam ac ultrices diam, ut mattis felis. Ut tortor tortor, suscipit eu elit facilisis, egestas commodo massa. Maecenas nec dolor ut est porttitor dictum. Nam vitae elit accumsan, mollis metus eu, hendrerit tortor.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam mattis malesuada sapien at pretium. Vestibulum placerat neque at sapien sagittis, a faucibus mauris efficitur. Fusce accumsan vitae ex ut lobortis. Cras tincidunt nisi turpis, luctus suscipit nisi rhoncus id. Duis id nibh vitae mi dapibus dapibus. Mauris nec nisl tellus. Nam ac ultrices diam, ut mattis felis. Ut tortor tortor, suscipit eu elit facilisis, egestas commodo massa. Maecenas nec dolor ut est porttitor dictum. Nam vitae elit accumsan, mollis metus eu, hendrerit tortor.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam mattis malesuada sapien at pretium. Vestibulum placerat neque at sapien sagittis, a faucibus mauris efficitur. Fusce accumsan vitae ex ut lobortis. Cras tincidunt nisi turpis, luctus suscipit nisi rhoncus id. Duis id nibh vitae mi dapibus dapibus. Mauris nec nisl tellus. Nam ac ultrices diam, ut mattis felis. Ut tortor tortor, suscipit eu elit facilisis, egestas commodo massa. Maecenas nec dolor ut est porttitor dictum. Nam vitae elit accumsan, mollis metus eu, hendrerit tortor.</p>
</article>
<article id="chapter-two">
<h3>Chapter Two</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam mattis malesuada sapien at pretium. Vestibulum placerat neque at sapien sagittis, a faucibus mauris efficitur. Fusce accumsan vitae ex ut lobortis. Cras tincidunt nisi turpis, luctus suscipit nisi rhoncus id. Duis id nibh vitae mi dapibus dapibus. Mauris nec nisl tellus. Nam ac ultrices diam, ut mattis felis. Ut tortor tortor, suscipit eu elit facilisis, egestas commodo massa. Maecenas nec dolor ut est porttitor dictum. Nam vitae elit accumsan, mollis metus eu, hendrerit tortor.</p>
</article>
<article id="chapter-three">
<h3>Chapter Three</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam mattis malesuada sapien at pretium. Vestibulum placerat neque at sapien sagittis, a faucibus mauris efficitur. Fusce accumsan vitae ex ut lobortis. Cras tincidunt nisi turpis, luctus suscipit nisi rhoncus id. Duis id nibh vitae mi dapibus dapibus. Mauris nec nisl tellus. Nam ac ultrices diam, ut mattis felis. Ut tortor tortor, suscipit eu elit facilisis, egestas commodo massa. Maecenas nec dolor ut est porttitor dictum. Nam vitae elit accumsan, mollis metus eu, hendrerit tortor.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam mattis malesuada sapien at pretium. Vestibulum placerat neque at sapien sagittis, a faucibus mauris efficitur. Fusce accumsan vitae ex ut lobortis. Cras tincidunt nisi turpis, luctus suscipit nisi rhoncus id. Duis id nibh vitae mi dapibus dapibus. Mauris nec nisl tellus. Nam ac ultrices diam, ut mattis felis. Ut tortor tortor, suscipit eu elit facilisis, egestas commodo massa. Maecenas nec dolor ut est porttitor dictum. Nam vitae elit accumsan, mollis metus eu, hendrerit tortor.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam mattis malesuada sapien at pretium. Vestibulum placerat neque at sapien sagittis, a faucibus mauris efficitur. Fusce accumsan vitae ex ut lobortis. Cras tincidunt nisi turpis, luctus suscipit nisi rhoncus id. Duis id nibh vitae mi dapibus dapibus. Mauris nec nisl tellus. Nam ac ultrices diam, ut mattis felis. Ut tortor tortor, suscipit eu elit facilisis, egestas commodo massa. Maecenas nec dolor ut est porttitor dictum. Nam vitae elit accumsan, mollis metus eu, hendrerit tortor.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam mattis malesuada sapien at pretium. Vestibulum placerat neque at sapien sagittis, a faucibus mauris efficitur. Fusce accumsan vitae ex ut lobortis. Cras tincidunt nisi turpis, luctus suscipit nisi rhoncus id. Duis id nibh vitae mi dapibus dapibus. Mauris nec nisl tellus. Nam ac ultrices diam, ut mattis felis. Ut tortor tortor, suscipit eu elit facilisis, egestas commodo massa. Maecenas nec dolor ut est porttitor dictum. Nam vitae elit accumsan, mollis metus eu, hendrerit tortor.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam mattis malesuada sapien at pretium. Vestibulum placerat neque at sapien sagittis, a faucibus mauris efficitur. Fusce accumsan vitae ex ut lobortis. Cras tincidunt nisi turpis, luctus suscipit nisi rhoncus id. Duis id nibh vitae mi dapibus dapibus. Mauris nec nisl tellus. Nam ac ultrices diam, ut mattis felis. Ut tortor tortor, suscipit eu elit facilisis, egestas commodo massa. Maecenas nec dolor ut est porttitor dictum. Nam vitae elit accumsan, mollis metus eu, hendrerit tortor.</p>
</article>
<article id="chapter-four">
<h3>Chapter Four</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam mattis malesuada sapien at pretium. Vestibulum placerat neque at sapien sagittis, a faucibus mauris efficitur. Fusce accumsan vitae ex ut lobortis. Cras tincidunt nisi turpis, luctus suscipit nisi rhoncus id. Duis id nibh vitae mi dapibus dapibus. Mauris nec nisl tellus. Nam ac ultrices diam, ut mattis felis. Ut tortor tortor, suscipit eu elit facilisis, egestas commodo massa. Maecenas nec dolor ut est porttitor dictum. Nam vitae elit accumsan, mollis metus eu, hendrerit tortor.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam mattis malesuada sapien at pretium. Vestibulum placerat neque at sapien sagittis, a faucibus mauris efficitur. Fusce accumsan vitae ex ut lobortis. Cras tincidunt nisi turpis, luctus suscipit nisi rhoncus id. Duis id nibh vitae mi dapibus dapibus. Mauris nec nisl tellus. Nam ac ultrices diam, ut mattis felis. Ut tortor tortor, suscipit eu elit facilisis, egestas commodo massa. Maecenas nec dolor ut est porttitor dictum. Nam vitae elit accumsan, mollis metus eu, hendrerit tortor.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam mattis malesuada sapien at pretium. Vestibulum placerat neque at sapien sagittis, a faucibus mauris efficitur. Fusce accumsan vitae ex ut lobortis. Cras tincidunt nisi turpis, luctus suscipit nisi rhoncus id. Duis id nibh vitae mi dapibus dapibus. Mauris nec nisl tellus. Nam ac ultrices diam, ut mattis felis. Ut tortor tortor, suscipit eu elit facilisis, egestas commodo massa. Maecenas nec dolor ut est porttitor dictum. Nam vitae elit accumsan, mollis metus eu, hendrerit tortor.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam mattis malesuada sapien at pretium. Vestibulum placerat neque at sapien sagittis, a faucibus mauris efficitur. Fusce accumsan vitae ex ut lobortis. Cras tincidunt nisi turpis, luctus suscipit nisi rhoncus id. Duis id nibh vitae mi dapibus dapibus. Mauris nec nisl tellus. Nam ac ultrices diam, ut mattis felis. Ut tortor tortor, suscipit eu elit facilisis, egestas commodo massa. Maecenas nec dolor ut est porttitor dictum. Nam vitae elit accumsan, mollis metus eu, hendrerit tortor.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam mattis malesuada sapien at pretium. Vestibulum placerat neque at sapien sagittis, a faucibus mauris efficitur. Fusce accumsan vitae ex ut lobortis. Cras tincidunt nisi turpis, luctus suscipit nisi rhoncus id. Duis id nibh vitae mi dapibus dapibus. Mauris nec nisl tellus. Nam ac ultrices diam, ut mattis felis. Ut tortor tortor, suscipit eu elit facilisis, egestas commodo massa. Maecenas nec dolor ut est porttitor dictum. Nam vitae elit accumsan, mollis metus eu, hendrerit tortor.</p>
</article>
<article id="chapter-five">
<h3>Chapter Five</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam mattis malesuada sapien at pretium. Vestibulum placerat neque at sapien sagittis, a faucibus mauris efficitur. Fusce accumsan vitae ex ut lobortis. Cras tincidunt nisi turpis, luctus suscipit nisi rhoncus id. Duis id nibh vitae mi dapibus dapibus. Mauris nec nisl tellus. Nam ac ultrices diam, ut mattis felis. Ut tortor tortor, suscipit eu elit facilisis, egestas commodo massa. Maecenas nec dolor ut est porttitor dictum. Nam vitae elit accumsan, mollis metus eu, hendrerit tortor.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam mattis malesuada sapien at pretium. Vestibulum placerat neque at sapien sagittis, a faucibus mauris efficitur. Fusce accumsan vitae ex ut lobortis. Cras tincidunt nisi turpis, luctus suscipit nisi rhoncus id. Duis id nibh vitae mi dapibus dapibus. Mauris nec nisl tellus. Nam ac ultrices diam, ut mattis felis. Ut tortor tortor, suscipit eu elit facilisis, egestas commodo massa. Maecenas nec dolor ut est porttitor dictum. Nam vitae elit accumsan, mollis metus eu, hendrerit tortor.</p>
</article>
<article id="chapter-six">
<h3>Chapter Six</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam mattis malesuada sapien at pretium. Vestibulum placerat neque at sapien sagittis, a faucibus mauris efficitur. Fusce accumsan vitae ex ut lobortis. Cras tincidunt nisi turpis, luctus suscipit nisi rhoncus id. Duis id nibh vitae mi dapibus dapibus. Mauris nec nisl tellus. Nam ac ultrices diam, ut mattis felis. Ut tortor tortor, suscipit eu elit facilisis, egestas commodo massa. Maecenas nec dolor ut est porttitor dictum. Nam vitae elit accumsan, mollis metus eu, hendrerit tortor.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam mattis malesuada sapien at pretium. Vestibulum placerat neque at sapien sagittis, a faucibus mauris efficitur. Fusce accumsan vitae ex ut lobortis. Cras tincidunt nisi turpis, luctus suscipit nisi rhoncus id. Duis id nibh vitae mi dapibus dapibus. Mauris nec nisl tellus. Nam ac ultrices diam, ut mattis felis. Ut tortor tortor, suscipit eu elit facilisis, egestas commodo massa. Maecenas nec dolor ut est porttitor dictum. Nam vitae elit accumsan, mollis metus eu, hendrerit tortor.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam mattis malesuada sapien at pretium. Vestibulum placerat neque at sapien sagittis, a faucibus mauris efficitur. Fusce accumsan vitae ex ut lobortis. Cras tincidunt nisi turpis, luctus suscipit nisi rhoncus id. Duis id nibh vitae mi dapibus dapibus. Mauris nec nisl tellus. Nam ac ultrices diam, ut mattis felis. Ut tortor tortor, suscipit eu elit facilisis, egestas commodo massa. Maecenas nec dolor ut est porttitor dictum. Nam vitae elit accumsan, mollis metus eu, hendrerit tortor.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam mattis malesuada sapien at pretium. Vestibulum placerat neque at sapien sagittis, a faucibus mauris efficitur. Fusce accumsan vitae ex ut lobortis. Cras tincidunt nisi turpis, luctus suscipit nisi rhoncus id. Duis id nibh vitae mi dapibus dapibus. Mauris nec nisl tellus. Nam ac ultrices diam, ut mattis felis. Ut tortor tortor, suscipit eu elit facilisis, egestas commodo massa. Maecenas nec dolor ut est porttitor dictum. Nam vitae elit accumsan, mollis metus eu, hendrerit tortor.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam mattis malesuada sapien at pretium. Vestibulum placerat neque at sapien sagittis, a faucibus mauris efficitur. Fusce accumsan vitae ex ut lobortis. Cras tincidunt nisi turpis, luctus suscipit nisi rhoncus id. Duis id nibh vitae mi dapibus dapibus. Mauris nec nisl tellus. Nam ac ultrices diam, ut mattis felis. Ut tortor tortor, suscipit eu elit facilisis, egestas commodo massa. Maecenas nec dolor ut est porttitor dictum. Nam vitae elit accumsan, mollis metus eu, hendrerit tortor.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam mattis malesuada sapien at pretium. Vestibulum placerat neque at sapien sagittis, a faucibus mauris efficitur. Fusce accumsan vitae ex ut lobortis. Cras tincidunt nisi turpis, luctus suscipit nisi rhoncus id. Duis id nibh vitae mi dapibus dapibus. Mauris nec nisl tellus. Nam ac ultrices diam, ut mattis felis. Ut tortor tortor, suscipit eu elit facilisis, egestas commodo massa. Maecenas nec dolor ut est porttitor dictum. Nam vitae elit accumsan, mollis metus eu, hendrerit tortor.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam mattis malesuada sapien at pretium. Vestibulum placerat neque at sapien sagittis, a faucibus mauris efficitur. Fusce accumsan vitae ex ut lobortis. Cras tincidunt nisi turpis, luctus suscipit nisi rhoncus id. Duis id nibh vitae mi dapibus dapibus. Mauris nec nisl tellus. Nam ac ultrices diam, ut mattis felis. Ut tortor tortor, suscipit eu elit facilisis, egestas commodo massa. Maecenas nec dolor ut est porttitor dictum. Nam vitae elit accumsan, mollis metus eu, hendrerit tortor.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam mattis malesuada sapien at pretium. Vestibulum placerat neque at sapien sagittis, a faucibus mauris efficitur. Fusce accumsan vitae ex ut lobortis. Cras tincidunt nisi turpis, luctus suscipit nisi rhoncus id. Duis id nibh vitae mi dapibus dapibus. Mauris nec nisl tellus. Nam ac ultrices diam, ut mattis felis. Ut tortor tortor, suscipit eu elit facilisis, egestas commodo massa. Maecenas nec dolor ut est porttitor dictum. Nam vitae elit accumsan, mollis metus eu, hendrerit tortor.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam mattis malesuada sapien at pretium. Vestibulum placerat neque at sapien sagittis, a faucibus mauris efficitur. Fusce accumsan vitae ex ut lobortis. Cras tincidunt nisi turpis, luctus suscipit nisi rhoncus id. Duis id nibh vitae mi dapibus dapibus. Mauris nec nisl tellus. Nam ac ultrices diam, ut mattis felis. Ut tortor tortor, suscipit eu elit facilisis, egestas commodo massa. Maecenas nec dolor ut est porttitor dictum. Nam vitae elit accumsan, mollis metus eu, hendrerit tortor.</p>
</article>
<section>
<p>
That was a demonstration of <a href="https://github.com/Radweb/ScrollSpy">ScrollSpy</a>.
</p>
</section>