-
Notifications
You must be signed in to change notification settings - Fork 1
/
demo.html
119 lines (112 loc) · 3.14 KB
/
demo.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
<html>
<head>
<script type="text/javascript" src="dist/fixie.min.js"></script>
<script type="text/javascript">
const ready = (callback) => {
if (document.readyState != 'loading') callback()
else document.addEventListener('DOMContentLoaded', callback)
}
// Grab the strategy from the URL
var strategy = undefined;
var match = document.location.search.match(/strategy=(.\S+)/);
if (match) strategy = match[1];
ready(function() {
const header = document.getElementsByTagName('header')[0]
console.log(header)
fixie.fixie(header, {strategy: strategy});
const menu = document.getElementsByTagName('menu')[0]
console.log(menu)
fixie.fixie(menu, {
topMargin: 80,
pinSlop: -80,
strategy: strategy,
pinnedBodyClass: 'showGlobalChange'
});
});
</script>
<style>
html, body {
margin: 0;
font-family: mono-spaced, monospace;
}
body.showGlobalChange {
background-color: lightyellow;
}
a {
color: blueviolet;
}
header {
height: 80px;
background-color: yellow;
width: 100%; /* when it becomes pinned with position: fixed, it needs a wider width */
}
header._pinnedToTop {
height: 30px;
z-index:100;
border-bottom: 1px solid #999;
box-shadow: 4px 4px 4px #777;
}
header nav {
display: inline-block;
padding: 25px 20px;
font-size: large;
}
header._pinnedToTop nav {
padding: 5px 20px 0px 20px;
font-size: medium;
}
h1 {
margin: 0;
display: inline-block;
padding: 20px;
}
header._pinnedToTop h1 {
font-size: medium;
padding: 5px 0 0 20px;
}
p {
margin-left: 20px;
width: 67%;
}
p:before {
content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam blandit leo quis eros aliquet blandit. Cras facilisis neque vel enim fermentum quis vulputate leo placerat. Nam molestie, lacus at faucibus blandit, diam quam placerat massa, nec tincidunt ligula dolor eu libero. Fusce neque erat, adipiscing eget consequat vel, sollicitudin id purus. Ut convallis auctor ipsum, vitae semper turpis posuere ac. In pellentesque, metus id rhoncus tincidunt, erat urna viverra metus, vitae egestas purus sapien at risus. In malesuada iaculis consectetur. In cursus vehicula lorem et feugiat.";
}
menu {
margin-left: 70%;
width: 30%;
height: 0;
}
menu nav {
padding: 10px;
width: 100%;
background-color: palevioletred;
box-shadow: 4px 4px 8px #999;
}
</style>
</head>
<body>
<header>
<h1>fixie Demo</h1>
<nav>
<a href="http://github.com/ndp/fixie">Github Repo</a>
<a href="http://ndpsoftware.com">More from NDP Software</a>
</nav>
</header>
<p></p>
<menu>
<nav>Apply Different Strategies</nav>
<nav><a href="?strategy=relative">relative</a></nav>
<nav><a href="?strategy=relativeWithHiding">relativeWithHiding</a></nav>
<nav><a href="?strategy=fixed">fixed</a></nav>
</menu>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
</body>
</html>