CASH-1365
CASH-1365 made global change to make header sticky like heritage
This commit is contained in:
parent
8b254b8fc4
commit
b6bcc4100e
1 changed files with 19 additions and 2 deletions
|
|
@ -1,5 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="funnel-header" v-if="imageSrc">
|
<div class="funnel-header" :class="{ scrolled: isScrolled }" v-if="imageSrc">
|
||||||
<div class="d-flex w-100">
|
<div class="d-flex w-100">
|
||||||
<progress-bar :page="$route.name" />
|
<progress-bar :page="$route.name" />
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -61,6 +61,7 @@ export default {
|
||||||
sierraChatOpen: false,
|
sierraChatOpen: false,
|
||||||
salesforceChatOpen: false,
|
salesforceChatOpen: false,
|
||||||
isSalesforceTransferInProgress: false,
|
isSalesforceTransferInProgress: false,
|
||||||
|
isScrolled: false,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
|
|
@ -185,6 +186,12 @@ export default {
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
window.addEventListener("salesforce-chat-visibility", this._handleSalesforceChatOpened);
|
window.addEventListener("salesforce-chat-visibility", this._handleSalesforceChatOpened);
|
||||||
|
|
||||||
|
// Add scroll listener for header shadow effect
|
||||||
|
this._handleScroll = () => {
|
||||||
|
this.isScrolled = window.scrollY > 0;
|
||||||
|
};
|
||||||
|
window.addEventListener("scroll", this._handleScroll);
|
||||||
},
|
},
|
||||||
beforeUnmount() {
|
beforeUnmount() {
|
||||||
window.removeEventListener("sierra-chat-closed", this._handleSierraChatClosed);
|
window.removeEventListener("sierra-chat-closed", this._handleSierraChatClosed);
|
||||||
|
|
@ -195,6 +202,7 @@ export default {
|
||||||
);
|
);
|
||||||
window.removeEventListener("sierra-chat-transfer", this._handleSierraToSalesforceTransfer);
|
window.removeEventListener("sierra-chat-transfer", this._handleSierraToSalesforceTransfer);
|
||||||
window.removeEventListener("salesforce-chat-visibility", this._handleSalesforceChatOpened);
|
window.removeEventListener("salesforce-chat-visibility", this._handleSalesforceChatOpened);
|
||||||
|
window.removeEventListener("scroll", this._handleScroll);
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
@ -209,9 +217,18 @@ export default {
|
||||||
padding: 2rem 0.75rem;
|
padding: 2rem 0.75rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
position: relative;
|
position: sticky;
|
||||||
|
top: 0;
|
||||||
|
z-index: 1000;
|
||||||
|
background-color: white;
|
||||||
|
box-shadow: none;
|
||||||
|
transition: box-shadow 0.3s ease-in-out;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
|
||||||
|
&.scrolled {
|
||||||
|
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
.button-container {
|
.button-container {
|
||||||
&.webchat {
|
&.webchat {
|
||||||
margin-right: 0.875rem;
|
margin-right: 0.875rem;
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue