sticky/index.html at main · fantasy-zeng/sticky · GitHub

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
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>Sticky</title>
	<link rel="stylesheet" href="sticky.css">
</head>
<body>
	<main id="wrapper">
		<header id="boundaryA" class="">
			<a id="open-modal" href="" title="">Open Modal</a>
		</header><!-- /header -->
		<article id="content">
			<section class="hero">
				<h1>Sticky.js Examples</h1>

			</section>
			<section>
				<div class="sticky-holder page-nav">
					<nav id="page-nav">
		        <ul>
              <li><a class="page-nav-link" href="#a" title="">Anchor A</a></li>
              <li><a class="page-nav-link" href="#b" title="">Anchor B</a></li>
              <li><a class="page-nav-link" href="#c" title="">Anchor C</a></li>
              <li><a class="page-nav-link" href="#d" title="">Anchor D</a></li>
		        </ul>
		      </nav>
			</div>
			</section>

			<section id="a">
				<div class="inner">
					<span class="big-letter">A</span>
					<h2>
						Holiest overcome transvaluation ocean madness hope good of. Hatred inexpedient intentions deceptions inexpedient ultimate decieve evil dead derive ubermensch. Ocean ascetic abstract grandeur decieve hatred justice ocean strong war dead faithful deceptions.
					</h2>
				</div>
			</section>

			<section id="b">
				<div class="sticky-holderB">
					<div id="stickyB">
						<h4>Mini-nav whatev</h4>
						<ul>
							<li>List Item</li>
							<li>List Item</li>
							<li>List Item</li>
							<li>List Item</li>
							<li>List Item</li>
						</ul>
					</div>
				</div>
				<div class="inner">
					<span class="big-letter">B</span>
					<h2>
						War prejudice love merciful will victorious spirit convictions salvation. Ubermensch superiority grandeur enlightenment ultimate snare decieve revaluation. Virtues war ubermensch marvelous insofar intentions philosophy.
					</h2>
					<h2>
						Society decrepit marvelous ultimate oneself derive abstract abstract merciful ultimate deceptions war inexpedient revaluation. Noble zarathustra selfish free ideal self truth prejudice society abstract society faith law self.
					</h2>
					<h2>
						Against christianity dead prejudice hatred moral self right joy. Pinnacle chaos selfish hatred hope. Ultimate joy sea deceptions prejudice self aversion derive ascetic. Holiest zarathustra pious merciful suicide hatred free free justice battle truth ultimate convictions. Abstract war salvation joy sexuality aversion will christian snare justice oneself.
					</h2>


					<div id="modal" class="hidden">
						<div id="boundaryModal">Mini nav for a modal, etc
							<a id="close-modal" href="" title="">Close Modal</a></div>
						<div id="scroller">
							<div class="inner">
								<h2>
									Of law endless law disgust christian christianity insofar derive love deceptions revaluation. Self ascetic ascetic holiest grandeur god pinnacle evil self snare aversion selfish strong. Decieve hope endless insofar madness disgust madness madness faithful truth faith society hope revaluation.
								</h2>
								<div id="stickyModal">Sticky Element B</div>
								<h2>
									Deceptions gains evil sexuality ubermensch marvelous marvelous society selfish inexpedient. Sexuality marvelous christianity zarathustra truth enlightenment faith revaluation evil chaos play oneself ubermensch.
								</h2>
								<h2>
									Grandeur value fearful ocean sea contradict self good horror grandeur free. Justice hope love law mountains insofar contradict derive play.
								</h2>
								<h2>
									Ultimate society disgust hope reason pinnacle. Deceptions merciful contradict ubermensch chaos contradict merciful dead derive value. Horror grandeur right philosophy disgust insofar chaos. Superiority reason revaluation contradict insofar holiest hope merciful intentions madness evil insofar joy love.
								</h2>
							</div>
						</div>
					</div>
				</div>
			</section>
			<section id="c"><div class="inner">
				<span class="big-letter">C</span>
					<h2>
						Holiest overcome transvaluation ocean madness hope good of. Hatred inexpedient intentions deceptions inexpedient ultimate decieve evil dead derive ubermensch. Ocean ascetic abstract grandeur decieve hatred justice ocean strong war dead faithful deceptions.
					</h2>
					<h2>
						Holiest overcome transvaluation ocean madness hope good of. Hatred inexpedient intentions deceptions inexpedient ultimate decieve evil dead derive ubermensch. Ocean ascetic abstract grandeur decieve hatred justice ocean strong war dead faithful deceptions.
					</h2>
				</div></section>
			<section id="d"><div class="inner">
				<span class="big-letter">D</span>
					<h2>
						Holiest overcome transvaluation ocean madness hope good of. Hatred inexpedient intentions deceptions inexpedient ultimate decieve evil dead derive ubermensch. Ocean ascetic abstract grandeur decieve hatred justice ocean strong war dead faithful deceptions.
					</h2>
					<h2>
						Holiest overcome transvaluation ocean madness hope good of. Hatred inexpedient intentions deceptions inexpedient ultimate decieve evil dead derive ubermensch. Ocean ascetic abstract grandeur decieve hatred justice ocean strong war dead faithful deceptions.
					</h2>
				</div><div class="inner">
					<h2>
						Holiest overcome transvaluation ocean madness hope good of. Hatred inexpedient intentions deceptions inexpedient ultimate decieve evil dead derive ubermensch. Ocean ascetic abstract grandeur decieve hatred justice ocean strong war dead faithful deceptions.
					</h2>
				</div></section>
		</article>
	</main>

	<script src="sticky.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript" charset="utf-8" async defer>

		// sticky element A
		let stickyA = document.getElementById('page-nav');
		let boundaryA = document.getElementById('boundaryA');
		let stickyViewportA = window;
		let stickyObjA = new Sticky(stickyA, boundaryA, true, stickyViewportA, true);

		// sticky element B

		let stickyB = document.getElementById('stickyB');
		let boundaryB = document.getElementById('page-nav');
		let stickyViewportB = window;
		let stickyObjB = new Sticky(stickyB, boundaryB, false, stickyViewportB, false);


		// // sticky element inside Modal
		// let stickyModal = document.getElementById('stickyModal');
		// let boundaryModal = document.getElementById('boundaryModal');
		// let stickyViewportModal = document.getElementById('scroller');
		// let stickyObjModal = new Sticky(stickyModal, boundaryModal, stickyViewportModal, false);


		// let openModal = document.getElementById('open-modal');
		// let closeModal = document.getElementById('close-modal');
		// let modal = document.getElementById('modal');
		// function modalControl(){
		// 	if (modal.classList.contains('hidden')) {
		// 		modal.classList.remove('hidden');
		// 	} else {
		// 		modal.classList.add('hidden');
		// 	}
		// }
		// openModal.addEventListener('click', function(event){
		// 	event.preventDefault();
		// 	modalControl();
		// });
		// closeModal.addEventListener('click', function(event){
		// 	event.preventDefault();
		// 	modalControl();
		// });


	</script>
</body>
</html>