Skip to content

Commit f415251

Browse files
jlukicjlukic
committed
Fix issue with sticky when larger than container
1 parent 76fefed commit f415251

File tree

3 files changed

+205
-0
lines changed

3 files changed

+205
-0
lines changed

‎RELEASE-NOTES.md

+4
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,13 @@
55
**Build**
66
- **Gulp** - Updated all tasks to work with Gulp 4. This should fix SUI to install correctly on Node 12 or greater (see [Gulp3 Issue](https://github.com/gulpjs/gulp/issues/2324) for more details)
77

8+
**Examples**
9+
- **Sticky** - Adds new example for sticky to highlight behavior when sticky/context height varies
10+
811
**Bug Fixes**
912
- **Dropdown** - Fix issue where dropdown menu could not open to right when in `right menu` inside a `ui menu` (See examples/sticky.html) for use-case
1013
- **Sticky** - Fix issue where element might be `bound bottom` (fixed to bottom of context) if the sticky element is larger than the context
14+
- **Sticky** - Fix issue when sticky size is larger than context size caused context `min-height` not to be set correctly.
1115

1216
### Version 2.4.2 - Oct 21, 2018
1317

‎examples/components/sticky-context.html

+189
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,189 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<!-- Standard Meta -->
5+
<meta charset="utf-8" />
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
8+
9+
<!-- Site Properties -->
10+
<title>Sticky Context - Semantic</title>
11+
12+
<link rel="stylesheet" type="text/css" href="../../dist/components/reset.css">
13+
<link rel="stylesheet" type="text/css" href="../../dist/components/site.css">
14+
15+
<link rel="stylesheet" type="text/css" href="../../dist/components/container.css">
16+
<link rel="stylesheet" type="text/css" href="../../dist/components/grid.css">
17+
<link rel="stylesheet" type="text/css" href="../../dist/components/header.css">
18+
19+
<link rel="stylesheet" type="text/css" href="../../dist/components/image.css">
20+
<link rel="stylesheet" type="text/css" href="../../dist/components/rail.css">
21+
<link rel="stylesheet" type="text/css" href="../../dist/components/sticky.css">
22+
<link rel="stylesheet" type="text/css" href="../../dist/components/form.css">
23+
<link rel="stylesheet" type="text/css" href="../../dist/components/button.css">
24+
25+
<script src="../assets/library/jquery.min.js"></script>
26+
<script src="../../dist/components/sticky.js"></script>
27+
<script>
28+
$(document)
29+
.ready(function() {
30+
31+
// sticky
32+
$('.ui.sticky').sticky({
33+
context: $('.page.container'),
34+
observeChanges: true
35+
});
36+
37+
$('.sticky.field .button')
38+
.on('click', function() {
39+
if($(this).hasClass('tall')) {
40+
$('.ui.sticky').addClass('tall').removeClass('short');
41+
}
42+
else {
43+
$('.ui.sticky').addClass('short').removeClass('tall');
44+
}
45+
$(this).addClass('primary').siblings().removeClass('primary');
46+
$('.ui.sticky').sticky('refresh');
47+
})
48+
;
49+
$('.content.field .button')
50+
.on('click', function() {
51+
if($(this).hasClass('tall')) {
52+
$('.page.container').addClass('tall').removeClass('short');
53+
}
54+
else {
55+
$('.page.container').addClass('short').removeClass('tall');
56+
}
57+
$(this).addClass('primary').siblings().removeClass('primary');
58+
})
59+
;
60+
61+
62+
})
63+
;
64+
</script>
65+
66+
<style type="text/css">
67+
68+
body {
69+
background-color: #FFFFFF;
70+
}
71+
.text.container {
72+
position: relative;
73+
margin-top: 3rem;
74+
}
75+
.rail .image {
76+
margin-bottom: 1rem;
77+
}
78+
.ui.sticky {
79+
padding: 1rem 0rem;
80+
}
81+
.masthead {
82+
background-color: #121212;
83+
padding: 4rem 0rem;
84+
color: rgba(255, 255, 255, 0.6);
85+
text-align: center;
86+
}
87+
.masthead p {
88+
font-size: 18px;
89+
max-width: 450px;
90+
margin: 0 auto 2rem;
91+
}
92+
93+
.ui.sticky.short img {
94+
display: none;
95+
}
96+
.ui.sticky.short img:first-child {
97+
display: block;
98+
}
99+
.ui.sticky.short img:nth-child(2) {
100+
display: block;
101+
}
102+
103+
.page.container {
104+
margin-bottom: 3rem;
105+
}
106+
.page.container.short p {
107+
display: none;
108+
}
109+
.page.container.short p:first-of-type {
110+
display: block;
111+
}
112+
113+
</style>
114+
115+
</head>
116+
<body>
117+
<div class="masthead">
118+
<div class="ui text container">
119+
<h2 class="ui inverted header">
120+
Page Header
121+
</h2>
122+
<p>This example helps show sticky behavior when it is larger or smaller than browser window or content height.</p>
123+
<div class="ui inverted form">
124+
<div class="two fields">
125+
<div class="content field">
126+
<label>Content Height</label>
127+
<div class="ui primary tall button">
128+
Tall
129+
</div>
130+
<div class="ui short button">
131+
Short
132+
</div>
133+
</div>
134+
<div class="sticky field">
135+
<label>Sticky Height</label>
136+
<div class="ui tall button">
137+
Tall
138+
</div>
139+
<div class="ui primary short button">
140+
Short
141+
</div>
142+
</div>
143+
</div>
144+
</div>
145+
</div>
146+
</div>
147+
<div class="ui tall page text container">
148+
<div class="ui right divided rail">
149+
<div class="ui short sticky">
150+
<img class="ui fluid image" src="../assets/images/wireframe/square-image.png">
151+
<img class="ui fluid image" src="../assets/images/wireframe/paragraph.png">
152+
<img class="ui fluid image" src="../assets/images/wireframe/paragraph.png">
153+
<img class="ui fluid image" src="../assets/images/wireframe/paragraph.png">
154+
<img class="ui fluid image" src="../assets/images/wireframe/paragraph.png">
155+
<img class="ui fluid image" src="../assets/images/wireframe/paragraph.png">
156+
<img class="ui fluid image" src="../assets/images/wireframe/paragraph.png">
157+
<img class="ui fluid image" src="../assets/images/wireframe/paragraph.png">
158+
<img class="ui fluid image" src="../assets/images/wireframe/paragraph.png">
159+
<img class="ui fluid image" src="../assets/images/wireframe/paragraph.png">
160+
<img class="ui fluid image" src="../assets/images/wireframe/paragraph.png">
161+
</div>
162+
</div>
163+
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
164+
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
165+
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
166+
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
167+
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
168+
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
169+
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
170+
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
171+
172+
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
173+
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
174+
175+
Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
176+
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
177+
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
178+
179+
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
180+
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
181+
182+
Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
183+
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
184+
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
185+
</div>
186+
187+
</body>
188+
189+
</html>

‎src/definitions/modules/sticky.js

+12
Original file line numberDiff line numberDiff line change
@@ -402,6 +402,18 @@ $.fn.sticky = function(parameters) {
402402
module.determineContainer();
403403
}
404404
else {
405+
var tallestHeight = Math.max(module.cache.context.height, module.cache.element.height);
406+
if(tallestHeight - $container.outerHeight() > settings.jitter) {
407+
module.debug('Context is taller than container. Specifying exact height for container', module.cache.context.height);
408+
$container.css({
409+
height: tallestHeight,
410+
});
411+
}
412+
else {
413+
$container.css({
414+
height: '',
415+
});
416+
}
405417
if( Math.abs($container.outerHeight() - module.cache.context.height) > settings.jitter) {
406418
module.debug('Context has padding, specifying exact height for container', module.cache.context.height);
407419
$container.css({

0 commit comments

Comments
 (0)