Streaming live at 10am (PST)

Section too short to be highlighted



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)

read-only link:

temporary address:


Hey @tema,

Instead of using the section as a trigger you could use a pixel on the top corner of this section and then play with the offset.

@vincent does this everytime and it works fine.


Yes any invisible element that has no dimension will do.


thanks @zbrah and @vincent

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…)

thanks a lot


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.


Hey @tema,

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,


but that would look weird…
or you’re talking about something that won’t be visible?


Or you invent a section to place before the footer. Take the occasion to try to link to other parts of your website…

closed #9

This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.