Skip to content

Commit f27e29a

Browse files
Updated component to version 2.5.0
1 parent 7410a6f commit f27e29a

9 files changed

+61
-40
lines changed

RELEASE-NOTES.md

+7
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,10 @@
1+
### Version 2.5.0 - Oct 6, 2022
2+
3+
- **Sticky** - Adds new example for sticky to highlight behavior when sticky/context height varies
4+
- **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
5+
- **Sticky** - Fix issue where element might be `bound bottom` (fixed to bottom of context) if the sticky element is larger than the context
6+
- **Sticky** - Fix issue when sticky size is larger than context size caused context `min-height` not to be set correctly.
7+
18
### Version 2.2.11 - July 11, 2017
29

310
- **Sticky** - Fix issue where sticky would cause page to shift when `context` height was determined by sticky's height in `position: static;` [#3430](https://github.com/Semantic-Org/Semantic-UI/issues/3430)

bower.json

+4-20
Original file line numberDiff line numberDiff line change
@@ -6,24 +6,8 @@
66
"name": "Jack Lukic",
77
"web": "http://www.jacklukic.com"
88
},
9-
"ignore": [
10-
"docs",
11-
"node",
12-
"server",
13-
"spec",
14-
"src",
15-
"test"
16-
],
17-
"keywords": [
18-
"semantic",
19-
"ui",
20-
"css3",
21-
"framework"
22-
],
23-
"license": [
24-
"http://semantic-ui.mit-license.org/"
25-
],
26-
"main": [
27-
"sticky.css"
28-
]
9+
"ignore": ["docs", "node", "server", "spec", "src", "test"],
10+
"keywords": ["semantic", "ui", "css3", "framework"],
11+
"license": ["http://semantic-ui.mit-license.org/"],
12+
"main": ["sticky.css"]
2913
}

composer.json

+3-8
Original file line numberDiff line numberDiff line change
@@ -5,15 +5,10 @@
55
"authors": [{
66
"name": "Jack Lukic",
77
"email": "[email protected]",
8-
"web": "http://www.jacklukic.com",
8+
"homepage": "http://www.jacklukic.com",
99
"role": "Creator"
1010
}],
11-
"keywords": [
12-
"semantic",
13-
"ui",
14-
"css",
15-
"framework"
16-
],
11+
"keywords": ["semantic", "ui", "css", "framework"],
1712
"license": "MIT",
18-
"version": "2.4.0"
13+
"version": "2.5.0"
1914
}

index.js

+21-3
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/*!
2-
* # Semantic UI 2.4.0 - Sticky
2+
* # Semantic UI 2.5.0 - Sticky
33
* http://github.com/semantic-org/semantic-ui/
44
*
55
*
@@ -403,6 +403,18 @@ module.exports = function(parameters) {
403403
module.determineContainer();
404404
}
405405
else {
406+
var tallestHeight = Math.max(module.cache.context.height, module.cache.element.height);
407+
if(tallestHeight - $container.outerHeight() > settings.jitter) {
408+
module.debug('Context is taller than container. Specifying exact height for container', module.cache.context.height);
409+
$container.css({
410+
height: tallestHeight,
411+
});
412+
}
413+
else {
414+
$container.css({
415+
height: '',
416+
});
417+
}
406418
if( Math.abs($container.outerHeight() - module.cache.context.height) > settings.jitter) {
407419
module.debug('Context has padding, specifying exact height for container', module.cache.context.height);
408420
$container.css({
@@ -439,7 +451,7 @@ module.exports = function(parameters) {
439451
},
440452
size: function() {
441453
if(module.cache.element.height !== 0 && module.cache.element.width !== 0) {
442-
element.style.setProperty('width', module.cache.element.width + 'px', 'important');
454+
element.style.setProperty('width', module.cache.element.width + 'px', 'important');
443455
element.style.setProperty('height', module.cache.element.height + 'px', 'important');
444456
}
445457
}
@@ -502,7 +514,7 @@ module.exports = function(parameters) {
502514
module.bindBottom();
503515
}
504516
else if(scroll.top > element.top) {
505-
if( (element.height + scroll.top - elementScroll) >= context.bottom ) {
517+
if((element.height + scroll.top - elementScroll) >= context.bottom && element.height < context.height) {
506518
module.debug('Initial element position is bottom of container');
507519
module.bindBottom();
508520
}
@@ -581,6 +593,9 @@ module.exports = function(parameters) {
581593
bindTop: function() {
582594
module.debug('Binding element to top of parent container');
583595
module.remove.offset();
596+
if(settings.setSize) {
597+
module.set.size();
598+
}
584599
$module
585600
.css({
586601
left : '',
@@ -598,6 +613,9 @@ module.exports = function(parameters) {
598613
bindBottom: function() {
599614
module.debug('Binding element to bottom of parent container');
600615
module.remove.offset();
616+
if(settings.setSize) {
617+
module.set.size();
618+
}
601619
$module
602620
.css({
603621
left : '',

package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "semantic-ui-sticky",
3-
"version": "2.4.0",
3+
"version": "2.5.0",
44
"title": "Semantic UI - Sticky",
55
"description": "Single component release of sticky",
66
"homepage": "http://www.semantic-ui.com",

sticky.css

+1-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/*!
2-
* # Semantic UI 2.4.0 - Sticky
2+
* # Semantic UI 2.5.0 - Sticky
33
* http://github.com/semantic-org/semantic-ui/
44
*
55
*
@@ -15,7 +15,6 @@
1515

1616
.ui.sticky {
1717
position: static;
18-
-webkit-transition: none;
1918
transition: none;
2019
z-index: 800;
2120
}

sticky.js

+21-3
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/*!
2-
* # Semantic UI 2.4.0 - Sticky
2+
* # Semantic UI 2.5.0 - Sticky
33
* http://github.com/semantic-org/semantic-ui/
44
*
55
*
@@ -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({
@@ -438,7 +450,7 @@ $.fn.sticky = function(parameters) {
438450
},
439451
size: function() {
440452
if(module.cache.element.height !== 0 && module.cache.element.width !== 0) {
441-
element.style.setProperty('width', module.cache.element.width + 'px', 'important');
453+
element.style.setProperty('width', module.cache.element.width + 'px', 'important');
442454
element.style.setProperty('height', module.cache.element.height + 'px', 'important');
443455
}
444456
}
@@ -501,7 +513,7 @@ $.fn.sticky = function(parameters) {
501513
module.bindBottom();
502514
}
503515
else if(scroll.top > element.top) {
504-
if( (element.height + scroll.top - elementScroll) >= context.bottom ) {
516+
if((element.height + scroll.top - elementScroll) >= context.bottom && element.height < context.height) {
505517
module.debug('Initial element position is bottom of container');
506518
module.bindBottom();
507519
}
@@ -580,6 +592,9 @@ $.fn.sticky = function(parameters) {
580592
bindTop: function() {
581593
module.debug('Binding element to top of parent container');
582594
module.remove.offset();
595+
if(settings.setSize) {
596+
module.set.size();
597+
}
583598
$module
584599
.css({
585600
left : '',
@@ -597,6 +612,9 @@ $.fn.sticky = function(parameters) {
597612
bindBottom: function() {
598613
module.debug('Binding element to bottom of parent container');
599614
module.remove.offset();
615+
if(settings.setSize) {
616+
module.set.size();
617+
}
600618
$module
601619
.css({
602620
left : '',

sticky.min.css

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
/*!
2-
* # Semantic UI 2.4.0 - Sticky
2+
* # Semantic UI 2.5.0 - Sticky
33
* http://github.com/semantic-org/semantic-ui/
44
*
55
*
66
* Released under the MIT license
77
* http://opensource.org/licenses/MIT
88
*
9-
*/.ui.sticky{position:static;-webkit-transition:none;transition:none;z-index:800}.ui.sticky.bound{position:absolute;left:auto;right:auto}.ui.sticky.fixed{position:fixed;left:auto;right:auto}.ui.sticky.bound.top,.ui.sticky.fixed.top{top:0;bottom:auto}.ui.sticky.bound.bottom,.ui.sticky.fixed.bottom{top:auto;bottom:0}.ui.native.sticky{position:-webkit-sticky;position:-moz-sticky;position:-ms-sticky;position:-o-sticky;position:sticky}
9+
*/.ui.sticky{position:static;transition:none;z-index:800}.ui.sticky.bound{position:absolute;left:auto;right:auto}.ui.sticky.fixed{position:fixed;left:auto;right:auto}.ui.sticky.bound.top,.ui.sticky.fixed.top{top:0;bottom:auto}.ui.sticky.bound.bottom,.ui.sticky.fixed.bottom{top:auto;bottom:0}.ui.native.sticky{position:-webkit-sticky;position:-moz-sticky;position:-ms-sticky;position:-o-sticky;position:sticky}

0 commit comments

Comments
 (0)