-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathu-position-sticky.html
More file actions
123 lines (113 loc) · 6.63 KB
/
Copy pathu-position-sticky.html
File metadata and controls
123 lines (113 loc) · 6.63 KB
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
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Sticky Position</title>
<link rel="stylesheet" href="/public/styles/bundle.min.css">
<link rel="stylesheet" href="/public/styles/custom.full.css">
</head>
<body>
<div class="c-doc-layout">
<aside id="js-menu" class="c-doc-layout__sidebar">
<div class="c-box c-box--spacing-lg">
<div class="u-type-lg u-margin-block-end-sm"><strong>Getting Started</strong></div>
<div class="o-stack o-stack--gap-sm u-type-sm u-margin-block-end-md u-doc-padding-inline-start-md">
<a class="c-link-inline" href="/guide-installing.html">Installing</a>
<a class="c-link-inline" href="/guide-customizing.html">Customizing</a>
<a class="c-link-inline" href="/guide-extending.html">Extending</a>
</div>
<div class="u-type-lg u-margin-block-end-sm"><strong>Objects</strong></div>
<div class="o-stack o-stack--gap-sm u-type-sm u-margin-block-end-md u-doc-padding-inline-start-md">
<a class="c-link-inline" href="/o-cluster.html">Cluster</a>
<a class="c-link-inline" href="/o-container.html">Container</a>
<a class="c-link-inline" href="/o-grid.html">Grid</a>
<a class="c-link-inline" href="/o-media.html">Media</a>
<a class="c-link-inline" href="/o-pair.html">Pair</a>
<a class="c-link-inline" href="/o-ratio.html">Ratio</a>
<a class="c-link-inline" href="/o-stack.html">Stack</a>
</div>
<div class="u-type-lg u-margin-block-end-sm"><strong>Components</strong></div>
<div class="o-stack o-stack--gap-sm u-type-sm u-margin-block-end-md u-doc-padding-inline-start-md">
<a class="c-link-inline" href="/c-badge.html">Badge</a>
<a class="c-link-inline" href="/c-box.html">Box</a>
<a class="c-link-inline" href="/c-button-group.html">Button Group</a>
<a class="c-link-inline" href="/c-button.html">Button</a>
<a class="c-link-inline" href="/c-card.html">Card</a>
<a class="c-link-inline" href="/c-dialog.html">Dialog</a>
<a class="c-link-inline" href="/c-drawer">Drawer</a>
<a class="c-link-inline" href="/c-input-addin.html">Input Addin</a>
<a class="c-link-inline" href="/c-input.html">Input</a>
<a class="c-link-inline" href="/c-link-block.html">Link-Block</a>
<a class="c-link-inline" href="/c-link-inline.html">Link-Inline</a>
<a class="c-link-inline" href="/c-spinner.html">Spinner</a>
<a class="c-link-inline" href="/c-table.html">Table</a>
</div>
<div class="u-type-lg u-margin-block-end-sm"><strong>Behaviors</strong></div>
<div class="o-stack o-stack--gap-sm u-type-sm u-margin-block-end-md u-doc-padding-inline-start-md">
<a class="c-link-inline" href="/b-popover.html">Popover</a>
<a class="c-link-inline" href="/b-press-elevate.html">Press-Elevate</a>
<a class="c-link-inline" href="/b-press-outline.html">Press-Outline</a>
<a class="c-link-inline" href="/b-press-scale.html">Press-Scale</a>
<a class="c-link-inline" href="/b-press-tint.html">Press-Tint</a>
<a class="c-link-inline" href="/b-scroll-reveal.html">Scroll-Reveal</a>
</div>
<div class="u-type-lg u-margin-block-end-sm"><strong>Utilities</strong></div>
<div class="o-stack o-stack--gap-sm u-type-sm u-margin-block-end-md u-doc-padding-inline-start-md">
<a class="c-link-inline" href="/u-color.html">Color</a>
<a class="c-link-inline" href="/u-hidden-below.html">Hidden Below</a>
<a class="c-link-inline" href="/u-margin.html">Margin</a>
<a class="c-link-inline" href="/u-position-sticky.html">Sticky Position</a>
<a class="c-link-inline" href="/u-text.html">Text</a>
<a class="c-link-inline" href="/u-type.html">Type</a>
<a class="c-link-inline" href="/u-visible-below.html">Visible Below</a>
<a class="c-link-inline" href="/u-visually-hidden.html">Visually Hidden</a>
<a class="c-link-inline" href="/u-width.html">Width</a>
</div>
</div>
</aside>
<div id="js-layout-overlay" class="c-doc-layout__overlay"></div>
<div>
<header class="c-box c-box--spacing-lg u-color-primary">
<div class="o-cluster o-cluster--align-center o-cluster--justify-between">
<a class="c-link-inline" href="/"><strong>Wisp CSS</strong></a>
<a href="https://github.com/wispcode/wisp-css/">
<img src="/public/images/github-logo-sm.svg" alt="GitHub Logo">
</a>
</div>
</header>
<main class="c-doc-layout__main">
<button id="js-menu-toggle" class="c-button u-margin-block-end-md u-visible-below-md"> Toggle Menu </button>
<div class="position:relative">
<h1>Sticky Position</h1>
<p>Makes an element stick to the top of the screen.</p>
<pre><code><div class="u-position-sticky">
<div class="c-box u-color-primary">Sticky Header</div>
</div>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
</code></pre>
<div class="c-doc-preview">
<div style="height: 200px; overflow-y: scroll;">
<div style="height: 600px;">
<div class="u-position-sticky">
<div class="c-box u-color-primary">Sticky Header</div>
</div>
<p><p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
</div>
</div></p>
</div>
</div>
</main>
</div>
</div>
<script src="/public/scripts/sidebar.js"></script>
<script src="/public/scripts/demos.js"></script>
</body>
</html>