▼
Streaming live at 10am (PST)

Section too short to be highlighted

#1

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’).

page
page.png925x1085 30.5 KB

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

#2

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.

#3

Yes any invisible element that has no dimension will do.

#4

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

#5

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.

#6

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,

#7

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

#8

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.