Jenny P
KPCKevin Powell - Community
•Created by Jenny P on 10/11/2023 in #front-end
Fancybox alternatives to modals
Pure HTML at the moment. I wish we used a framework....it's on my roadmap!!
23 replies
KPCKevin Powell - Community
•Created by Jenny P on 8/25/2023 in #front-end
Help with scrolling submenu, IntersectionObserver
I feel like I'd have multiple active items
21 replies
KPCKevin Powell - Community
•Created by Jenny P on 8/25/2023 in #front-end
Help with scrolling submenu, IntersectionObserver
MDN's site was the only one I'd seen where they aren't either "active when the next item reaches viewport" or "make section full page height"
21 replies
KPCKevin Powell - Community
•Created by Jenny P on 8/25/2023 in #front-end
Help with scrolling submenu, IntersectionObserver
But I only want the nav bar 'active' item to be active when an item reaches the top of the sticky nav. With short items, multiple items are fully in viewport at the same time.
21 replies
KPCKevin Powell - Community
•Created by Jenny P on 8/25/2023 in #front-end
Help with scrolling submenu, IntersectionObserver
Oh. Okay. So, here's my setup.
-header (gets sticky based on scroll)
--layout-container (thanks, drupal)
---nav (gets sticky based on scroll)
---section 1
---section 2
---etc
21 replies
KPCKevin Powell - Community
•Created by Jenny P on 8/25/2023 in #front-end
Help with scrolling submenu, IntersectionObserver
Ohhh! Actually my issue is specifically a sticky nav at the top of the page (below a sticky header) so that wouldn't work for me. But it was the example that the MDN nav only changed when the section reached the bottom of the sticky header that I wanted to mimic.
21 replies
KPCKevin Powell - Community
•Created by Jenny P on 8/25/2023 in #front-end
Help with scrolling submenu, IntersectionObserver
Really?? How so?
21 replies
KPCKevin Powell - Community
•Created by Jenny P on 8/25/2023 in #front-end
Help with scrolling submenu, IntersectionObserver
I am definitely going to go back to a passive scroll event. 🙂 Thank you!!!
21 replies
KPCKevin Powell - Community
•Created by Jenny P on 8/25/2023 in #front-end
Help with scrolling submenu, IntersectionObserver
Right, I was trying to do it based on the (calculated) height of the sticky header and do that as a negative root viewport, but it wasn't working.
21 replies
KPCKevin Powell - Community
•Created by Jenny P on 8/25/2023 in #front-end
Help with scrolling submenu, IntersectionObserver
I meant, the MDN page has a sidebar sub-nav which is doing exactly what I want - changing the 'active' item to be active only when the heading gets to the top of the sticky header. But I suspect, since the height of the header can theoretically changed based on window size and resize, that it needs to be a scroll observer.
21 replies
KPCKevin Powell - Community
•Created by Jenny P on 8/25/2023 in #front-end
Help with scrolling submenu, IntersectionObserver
I agree, I was suspecting it needed to be the scroll event, it just seems like everywhere I looked people were recommending IO instead. I tried looking at the source of the MDN page to see how theirs was implemented, but no luck lol.
21 replies