Floating agent bottom #238
Conversation
|
Hello, I'm the AEM Code Sync Bot and I will run some actions to deploy your branch and validate page speed.
|
|
|
@bstopp review comment incorporated. Please re-review. |
| const displayedElement = document.querySelector('.floatingagent'); | ||
|
|
||
| const heroElement = document.querySelector('.hero-wrapper'); | ||
|
|
||
| const observer = new IntersectionObserver((entries) => { | ||
| entries.forEach((entry) => { | ||
| if (entry.isIntersecting) { | ||
| displayedElement.style.display = 'none'; | ||
| } else { | ||
| displayedElement.style.display = 'flex'; | ||
| } | ||
| }); | ||
| }, { | ||
| threshold: [0], | ||
| }); | ||
|
|
||
| observer.observe(heroElement); |
There was a problem hiding this comment.
Can this move to inside the decorate function, or will that break it?
There was a problem hiding this comment.
Definitely thats right. and that will ensure that the observer is only created where the decorate function is executed.
thanks.
Co-authored-by: Bryan Stopp <[email protected]>
| margin-right: 5%; | ||
| } | ||
|
|
||
| @media (max-width: 600px) { |
There was a problem hiding this comment.
can you flip this? always start with mobile view as the default, then it's min-width on up. I realize that will probably have pretty significant changes to the styling.
There was a problem hiding this comment.
Corrected.
The floating agent footer should toggle visibility based on the hero visibility.
Fix #160
Test URLs: