This repository was archived by the owner on Dec 24, 2017. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
119 lines (114 loc) · 4.76 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
<!DOCTYPE html>
<html>
<head>
<title>sidescroll.js</title>
<link rel="stylesheet" href="./bower_components/normalize.css/normalize.css"/>
<link rel="stylesheet" href="./demo/styles/main.css"/>
<link href="./favicon.ico" rel="icon" type="image/x-icon">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--[if lt IE 9]>
<script src="../bower_components/html5shiv/dist/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<main class="main">
<section class="content">
<div class="content-inner-wrap">
<nav class="jumbo-links">
<a
class="btn"
href="https://raw.githubusercontent.com/godban/sidescroll.js/master/dist/jquery.sidescroll.min.js">
<img src="./demo/images/download.svg" alt="Download" width="16px" height="16px"/>
Download
</a>
<a class="btn"
target="_blank"
href="https://github.com/godban/sidescroll.js">
<img src="./demo/images/github.svg" alt="GitHub" width="16px" height="16px"/>
GitHub
</a>
</nav>
<h1>
↕ sidescroll<span class="color-secondary">.js</span>
<br/>
<small>Accessible fixed Sidebar with Smart Scroll.</small>
</h1>
<p>
There is different cases when you are using sidebar and often CSS just not enough to make it user
friendly.
What scenarios you should be considered to make sidebar always accessible.
</p>
<ul class="examples-legend">
<li>
<span class="example-square-window"></span>
W - Window
</li>
<li>
<span class="example-square-sidebar"></span>
S - Sidebar
</li>
<li>
<span class="example-square-content"></span>
C - Content
</li>
</ul>
<table class="examples-table">
<tbody>
<tr>
<th>S >= C, S <= W, C <= W</th>
<th>S > C, S >= W, C <= W</th>
</tr>
<tr>
<td>Simplest scenario when Sidebar greater or equal Content height and less than Window height. For
this case is nothing be worried about, static position is pretty enough.
<img src="./proto/case1.svg" alt="case 1">
</td>
<td>Another static scenario is when Sidebar is greater than Content height and they both can be
greater than window size. Scroll will be determinated by Sidebar height.
<img src="./proto/case2.svg" alt="case 2">
</td>
</tr>
<tr>
<td class="text-center">
<a href="./demo/case1.html" class="btn">View case #1</a>
</td>
<td class="text-center">
<a href="./demo/case2.html" class="btn">View case #2</a>
</td>
</tr>
<tr>
<th>S < C, S <= W, C > W</th>
<th>S < C, S > W, C > W</th>
</tr>
<tr>
<td>Sidebar is less than Content and Window heights. In this cases static position is not enough.
Sidebar should be fixed to be always visible.
<img src="./proto/case3.svg" alt="case 3">
</td>
<td>And most complicated scenario is when Sidebar less than Content height and greater with Content
than window size. In this case fixed position is not enough. Sidebar should be scrollable.
<img src="./proto/case4.svg" alt="Case 4">
</td>
</tr>
<tr>
<td class="text-center">
<a href="./demo/case3.html" class="btn">View case #3</a>
</td>
<td class="text-center">
<a href="./demo/case4.html" class="btn">View case #4</a>
</td>
</tr>
</tbody>
</table>
</div>
</section>
</main>
<script src="./bower_components/jquery/dist/jquery.min.js"></script>
<script src="./dist/jquery.sidescroll.js"></script>
<script>
$('.sidebar').sideScroll({
content: '.content'
});
</script>
</body>
</html>