Hi,
My site has a navbar with a background image tiled and fixed to the top of the element. I’m trying to get the navbar to move up on scroll so that the image disappears and also to reduce the size of the logo (stylename=‘Brand’).
It’s working fine in Chrome and FF, but in MS Edge the navbar judders as you scroll. IE11 is the same, plus the navbar doesn’t move up, so the background image remains in sight.
I’ve no idea what I can do to fix this, so would really appreciate any help - thanks!
I have attached a shot from IE where the navbar background image remains on the screen when I scroll down (it should move out of view as it does in Chrome and FF), but I can’t show you the ‘jumping’ behaviour of the navbar in IE and Edge. To see this, just open the site in either of those browsers and scroll down…
Carol, I am seeing the same behavior over here on Edge.
Smooth as butter when using the scroll bar, but when using the scroll wheel or trackpad, it hops all over the place! I’m moving this to bugs in the hope that another forum member or someone from the Webflow team can give a more detailed response/workaround.
The behavior is also working incorrectly on Safari, as the social links and the top of your navbar disappear upon page load. The interaction is set to move the navbar up at an 81% offset, yet it seems to happen instantly on Safari.
Thanks for your help, though it’s a bit disappointing to find it’s probably a bug. Have you any suggestions for any way I might work round this, even if it means losing the background image (which isn’t a deal breaker)? I really do need the header to shrink smoothly on all devices if possible.
@VladimirVitaliyevich, are you sure the animation isn’t moving the navbar up like this after load? Notice how the black and white pattern at the top of the navbar scrolls out of sight.
I think I’ve fixed it now. I found that if I set the background image on the navbar element to fixed, it doesn’t work in IE/Edge. However, by changing this to Scroll, it now works in Edge/IE/FF and Chrome.
Can you please let me know how it’s looking in Safari as I don’t have any Apple devices.