@energysage/es-ds-components 5.5.6 → 5.6.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +7 -0
- package/app/components/es-sticky-bar.vue +20 -0
- package/app/utils/sticky-bar.ts +2 -0
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,12 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## [5.6.0](https://github.com/EnergySage/es-ds/compare/es-ds-components-v5.5.6...es-ds-components-v5.6.0) (2026-06-01)
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
### Features
|
|
7
|
+
|
|
8
|
+
* sticky bar now coordinates with other fixed position elements ([#1764](https://github.com/EnergySage/es-ds/issues/1764)) ([3d250de](https://github.com/EnergySage/es-ds/commit/3d250de895097cce81ca1c624ef0306229ebcf97))
|
|
9
|
+
|
|
3
10
|
## [5.5.6](https://github.com/EnergySage/es-ds/compare/es-ds-components-v5.5.5...es-ds-components-v5.5.6) (2026-05-29)
|
|
4
11
|
|
|
5
12
|
|
|
@@ -77,9 +77,15 @@ function updateVisibility() {
|
|
|
77
77
|
if (currentScrollY <= 0) {
|
|
78
78
|
// back at the very top: switch to absolute so bar scrolls away naturally on next scroll down
|
|
79
79
|
barState.value = 'absolute';
|
|
80
|
+
|
|
81
|
+
// emit event notifying other fixed position elements of the change
|
|
82
|
+
emitter.emit(ES_STICKY_BAR_FIXED_HIDE_EVENT_NAME);
|
|
80
83
|
} else if (barState.value === 'absolute' && currentScrollY >= barHeight.value) {
|
|
81
84
|
// bar has scrolled fully off screen: reposition to fixed-hidden while invisible
|
|
82
85
|
hideWithoutAnimation();
|
|
86
|
+
|
|
87
|
+
// emit event notifying other fixed position elements of the change
|
|
88
|
+
emitter.emit(ES_STICKY_BAR_FIXED_HIDE_EVENT_NAME);
|
|
83
89
|
} else if (
|
|
84
90
|
barState.value === 'fixed-hidden' &&
|
|
85
91
|
scrollDirection < 0 &&
|
|
@@ -87,6 +93,9 @@ function updateVisibility() {
|
|
|
87
93
|
) {
|
|
88
94
|
// scrolling up far enough: slide bar into view
|
|
89
95
|
barState.value = 'fixed-visible';
|
|
96
|
+
|
|
97
|
+
// emit event notifying other fixed position elements of the change
|
|
98
|
+
emitter.emit(ES_STICKY_BAR_FIXED_SHOW_EVENT_NAME);
|
|
90
99
|
} else if (
|
|
91
100
|
barState.value === 'fixed-visible' &&
|
|
92
101
|
scrollDirection > 0 &&
|
|
@@ -94,6 +103,9 @@ function updateVisibility() {
|
|
|
94
103
|
) {
|
|
95
104
|
// scrolling down far enough: slide bar off screen
|
|
96
105
|
barState.value = 'fixed-hidden';
|
|
106
|
+
|
|
107
|
+
// emit event notifying other fixed position elements of the change
|
|
108
|
+
emitter.emit(ES_STICKY_BAR_FIXED_HIDE_EVENT_NAME);
|
|
97
109
|
}
|
|
98
110
|
|
|
99
111
|
lastScrollY = currentScrollY;
|
|
@@ -129,6 +141,12 @@ const onMenuBarClose = () => {
|
|
|
129
141
|
}
|
|
130
142
|
};
|
|
131
143
|
|
|
144
|
+
// expose barHeight to other fixed position elements via a CSS variable on <html> so they can
|
|
145
|
+
// position themselves relative to the bar
|
|
146
|
+
watch(barHeight, (height) => {
|
|
147
|
+
document.documentElement.style.setProperty('--es-sticky-bar-height', `${height}px`);
|
|
148
|
+
});
|
|
149
|
+
|
|
132
150
|
onMounted(() => {
|
|
133
151
|
// measure height before switching position so the placeholder matches exactly
|
|
134
152
|
barHeight.value = bar.value?.offsetHeight ?? 0;
|
|
@@ -154,6 +172,8 @@ onMounted(() => {
|
|
|
154
172
|
onUnmounted(() => {
|
|
155
173
|
window.removeEventListener('scroll', onScroll);
|
|
156
174
|
|
|
175
|
+
document.documentElement.style.removeProperty('--es-sticky-bar-height');
|
|
176
|
+
|
|
157
177
|
emitter.off(ES_MENU_BAR_OPEN_EVENT_NAME, onMenuBarOpen);
|
|
158
178
|
emitter.off(ES_MENU_BAR_CLOSE_EVENT_NAME, onMenuBarClose);
|
|
159
179
|
});
|