i have a page with 5 sections - and in each section there’s rectangle which should change color when the section is scrolled into view. (this is a link block to the section ID which changes appearance when in current state - class is called ‘color fill’).
now… everything works great for the middle sections, but the 1st and 5th sections are too short to be considered as the current section. (when i fill them with some dummy content, or when i view the website on a mobile device, which makes them be higher, they work fine…)
any idea on how this can be solved…?
thanks a lot
(the site is right-to-left) (the issue is in page: office)
but i’m not sure i understand…
are you guys talking about a scroll trigger instead of a section trigger?
(if so, i would loose the ability to “turn off” the color block of the previous section - meaning, i want to have just 1 color block at a time…)
Sorry I hedn’t really read the initial question, I was only referring to the technique described by @zbrah… which can’t solve your problem because you’re not using interactions but the :current state.
If you want to use this method, with this layout, then there’s no simple solution. Even if you use interactions to have only 1 highlited element at a time on any screen height, that’s going to be tricky too.
What you can do is make a height:80vh footer on that page, you’re then certain any section down the page will have the occasion to reach the :current state position for the link.
Hum yeah sorry i thought it was an interaction on scroll.
Yeah i guess as vincent said, a big footer at the bottom of the site should do the trick.
Lets u know,