diff --git a/src/common-components/funnel-footer/funnel-footer.spec.js b/src/common-components/funnel-footer/funnel-footer.spec.js index 30dc14fd3..198fa5657 100644 --- a/src/common-components/funnel-footer/funnel-footer.spec.js +++ b/src/common-components/funnel-footer/funnel-footer.spec.js @@ -62,6 +62,7 @@ describe("funnel-footer.vue", () => { const mockMixin = { methods: { - getCmsContent: jest.fn() + getCmsContent: jest.fn(), + getFooterInfoBoxHeight: jest.fn(()=>80) } } \ No newline at end of file diff --git a/src/ux-components/alert/alert.vue b/src/ux-components/alert/alert.vue index 1fc0b38d9..d80519f9a 100644 --- a/src/ux-components/alert/alert.vue +++ b/src/ux-components/alert/alert.vue @@ -90,19 +90,21 @@ export default { // second split would return 'provide your VIN' return copy.split(':')[1].split(',')[1]; }, - isAlertInViewport() { + isAlertInViewport(footerHeight) { const rect = this.$el.getBoundingClientRect(); return ( rect.top >= 0 && - rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) + // remove footerHeight from window height to avoid items being hidden behind footer + rect.bottom <= (window.innerHeight - footerHeight || document.documentElement.clientHeight - footerHeight) ); }, }, updated() { if (this.doesScrollToOnAppear && this.$el.style.display != 'none') { - if (!this.isAlertInViewport()) { + var footerHeight = this.getFooterInfoBoxHeight(); + if (!this.isAlertInViewport(footerHeight)) { // alert position on page + height of alert + footer height - var scrollToHeight = this.$el.scrollHeight + this.$el.offsetHeight + this.getFooterInfoBoxHeight(); + var scrollToHeight = this.$el.scrollHeight + this.$el.offsetHeight + footerHeight; // find the div wrapped by the form element - this is the scrollable container // should be a more future-proof selector in case of CSS class changes var pageContainerScrollable = document.querySelector('form > div');