I have interactions set up on my navigation bar so it switches to a “compact” version after scrolling a short way, and also inverts colours at certain points so you can still see it on a black background — this inverting is the main problem, as it requires precision.
I’ve tried using the “when scrolling in view” interaction attached to sections with black backgrounds. I also tried with a “while page is scrolling” trigger, thinking it would help as the distance down the page would stay relevant, but it doesn’t.
For instance, if you make the window very short, you can see the interaction happening with no scroll, or if you view the site on a very large screen the invert filter doesn’t occur at the correct points over the black backgrounds. I hope this makes sense, any and all suggestions are very much appreciated.
With “while scrolling in view” (applied to header div and black background text section):
Does anyone have any ideas on this? Ideally I’d like the interaction to trigger when the top of the element hits the top of the viewport, rather than when it starts appearing or is fully visible.
I finally figured it out! I had to use two 95vh absolutely positioned divs, one inside the section with the dark background and on immediately below it, then use those entering and leaving as triggers for the invert filter to simulate the dark area hitting the bottom and top of the viewport.
I did some experiment and I think it is something that would help you to achieve the effect you want
Create a div (I called it nav-trigger-block) and keep it position Absolute right on the body.
You will want to have it 100vh height, so you know that your interaction will happen during the scrolling only one-page height, but also, apply minimum height in pixels, to make sure that for situations when user is reduce the browser height it still happens smooth. I applied 1000px.
P.S. I also gave it 100 px width and color, which not necessary, it just for easier visual recognition during the development
Use that div as a trigger and apply “While scrolling in view” type of interaction.
Adjust the offset presets: What will be recognized as 0% and 100% ( I showed how those settings affecting the result in the video)
Move the Initial part of the action to 0%
After you satisfied with the result hide the trigger div. DO NOT set it to display:none, just remove the bg color, if applied and make its z-index to some negative value
