The only hold-up you may encounter is that the “While page is scrolling” interaction is percentage-based and not pixel-based, so it may be a little harder to achieve what you’re trying to do at exactly 100 pixels. That said, you can get really close by playing around with it.
Also, on the note of the logo on that website, you can achieve the same effect (the logo “shrinking”) by having two versions of the logo in place within the navbar. You would set the shortened logo to have an initial state of
display: none and then as the page scrolls, you could set the original logo to disappear (
display: none) at a certain percentage point and set the shortened logo to
display: block. This is sort of similar to what’s happening on the referenced website, but they’re using some sort of custom code to quite literally swap out the image while the page is scrolling.
Let me know if you need any assistance!