Section too short to be highlighted

[tema (webflow.tema@gmail.com)]

hi,

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:
https://preview.webflow.com/preview/tema-arc?preview=c0fe5c51b851d6c6e7d7bca6dd9caffc

temporary address:
http://tema-arc.webflow.io/office

[zbrah (Louis)]

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.

[vincent (Webflow Expert)]

Yes any invisible element that has no dimension will do.

[tema (webflow.tema@gmail.com)]

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

[vincent (Webflow Expert)]

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.

[zbrah (Louis)]

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,

[tema (webflow.tema@gmail.com)]

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

[vincent (Webflow Expert)]

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