I built a small example of a sticky menu with its respective sections. What I would like to achieve is to have Section 1 in the sticky menu be a different colour when it is showing Section 1, and as you scroll down to Section 2 (or press it), the colour changes as well and now Section 2 will be coloured in the menu.
I hope my request makes sense.
Thanks for the help!
Philipp
Hey @philippf, this is fairly straightforward to do.
You need to make use of the .current state -
Firstly, make all 4 of your text links the same class (i.e. .link), because at the minute you have .link, .link-2, link-3 etc. This means you will only have to apply styles once, not four times -
Next, wrap your section content (on the right-hand side), in 4 different div blocks. Give each of these div blocks a different element ID, such as #section-one, #section-two#section-three etc. -
Once all your div blocks on the RHS have a unique ID, you can then link the text links on the LHS to scroll to each div block/section. So, the text link saying ‘Section 1’ will be linked up with #section-one and so on. -
Then you can apply different stylings to the .current state, such as changing the text colour. So whenever that text link is clicked and/or that div block/section on the RHS is in view, the text links will be a different colour.
oOoOoOoOoooo this is great! Thanks so much, Oli. I’ve gone ahead and made those changes. It’s working great. I’ve decided to showcase this as it will be useful for others.
