This originally started out as a ‘change settings’ type question, it has now evolved in to a ‘change settings’ and ‘bug’ question.
The original ‘change settings’ question:
Is it possible to change the region of the viewport that activates the current state of a scroll anchor button?
I have some scroll anchors set up in the site below, if you go to the Home page and select the 2nd publication, MS Natural History, then open the side navigation panel, you will see the scroll links with a current state set.
The issue I have is that the current state only activates when the anchor reaches 50 into the viewport, it then deactivates when the bottom of the anchor passes the 50vh point.
What I would like it the anchor current state stays active until the anchor completely leaves the vp, is that possible?
You will see what I mean if you open the side nav and scroll the page manually, the current states of the buttons change color as the top and bottom of the sections reach the 50% vh point.
Part 2: Bug problem.
In testing the above settings I now find the scroll buttons do not scroll the page to the correct position, they seem to be confused as to which div is which. When you manually scroll the page, the current states of the buttons correctly recognise each div, but clicking the button does not scroll the page to the correct spot, is this a known bug?
Is it something to do with the links being nested inside a hidden panel?
By that I mean that if you have a “Carrers” section, you’re naturally incline to put the ID… on the section. But you could put it on another object, inside the section or outside.
I very frequently use a thin 0px transparent div as a trigger for scroll to anchor or as a trigger for OnScroll interactions. You can precisely place it where you want. You can even place it inside your section and position it outside using relative positioning.
That may not always help you in your search of controlling when the current state activates.
In the following post on my blog you can learn how to have better control of where the targeted section should stop:
You have a vertical nav bar and you need to tell Webflow that the targeted sections shouldn’t stop at the bottom of the nav bar, but the top of the screen, there is an option for this.
Hi Vincent,
Thanks for taking the time out to respond to my post.
I have tried inserting a new navbar using the Webflow navbar element, I have set it to fixed and set the fill page height option, I then copied some of the scroll buttons across and published.
(This is still just a concept page, i haven’t pitched it to the client yet, so I can be pretty brutal in positioning items for testing, no one will see it until it is fixed)
The buttons still do not scroll to the correct place, please have a look if you have time.
I sometimes find the Webflow designs can be a little buggy in that they just will not fix themselves until I rebuild them from scratch, this could be the case here.
Thanks Graham
Having just had another look, the buttons are definitely scrolling the anchors to be just below the viewport, if you click one of the buttons, the section it is scrolling to will be immediately below the bottom of the vp!
It is working almost exactly opposite to how it should work, maybe something to do with vh settings somewhere?
Thanks Graham