Need help with interaction design

Design help Animations & Interactions
1

Animation doesn’t work out the appearance of a hidden menu (MyBar) when scrolling UP. Menu doesn’t become visible. https://webflow.com/website/engines?s=engines

2

Hey @Barsik

You’ve just made minor error of placing your interaction on MyBar instead of Navbar. So basically the mybar is trying to fire this interaction on itself. Switch this out and you should be fine.

3

Thanks! You helped me solve my problem!

1 Like
4

Great to know. :thumbsup:

5

I did not understand anything. I need the MyBar to appear on the page scrolling up (not down)

6

I can’t do anything. when I scroll up, the animation does not work

7

You need to apply the interaction to the NavBar like this:

3086×760 382 KB

Remove the animation of the MyBar element:

3040×806 374 KB

and modify the animation to affect different elements like this:

844×1260 79 KB

and you’re good to go:

https://cl.ly/0L1I031e2b09

8

I need this menu to appear exactly when scrolling up, not down. I prescribed this condition in the animation settings. But these conditions do not work!

9

Someone help me, please.

10

Hi @Barsik, just to clarify, you are wanting the white menu to be initially visible on page load? Normally the menu will be hidden or displayed on load, and when the first section on the page becomes visible, you can set the menu to be displayed or not.

Thanks in advance for your info.

11

I need white menu initially invisible

12

Hi, so If I understand correctly, you want the MyBar nav (the “white menu”) to be initially invisible, and then as you scroll down, you want this white menu to become visible, and when scrolling back up to the home section, have that menu become invisible again, or do you want the white menu to stay visible on scroll up?

I guess I am still confused as the solution by @aaronocampo seems to do exactly that.

13

It should be invisible until I scroll down. It should become visible only when I scroll up. Unfortunately it doesn’t work in Webflow(

14

Hi @Barsik, is this the effect you are trying to accomplish? https://webflow.com/website/Medium-Navbar-in-Webflow

That solution requires a little custom code, which is what I think will be needed to get this to work as you wish.

2 Likes
18

I took this code.

<script src="https://daks2k3a4ib2z.cloudfront.net/58ed4d406c963d7697ab6904/js/webflow.5ec7d66de.js" type="text/javascript"></script>
<!--[if lte IE 9]><script src="//cdnjs.cloudflare.com/ajax/libs/placeholders/3.0.2/placeholders.min.js"></script><![endif]--><script>
// Hide Header on on scroll down
var didScroll;
var lastScrollTop = 0;
var delta = 5;
var navbarHeight = $('header').outerHeight();

$(window).scroll(function(event){
    didScroll = true;
});

setInterval(function() {
    if (didScroll) {
        hasScrolled();
        didScroll = false;
    }
}, 150);

function hasScrolled() {
    var st = $(this).scrollTop();
    
    // Make sure they scroll more than delta
    if(Math.abs(lastScrollTop - st) <= delta)
        return;
    
    // If they scrolled down and are past the navbar, add class .nav-up.
    // This is necessary so you never see what is "behind" the navbar.
    if (st > lastScrollTop && st > navbarHeight){
        // Scroll Down
        $('header').removeClass('nav-down').addClass('nav-up');
    } else {
        // Scroll Up
        if(st + $(window).height() < $(document).height()) {
            $('header').removeClass('nav-up').addClass('nav-down');
        }
    }
    
    lastScrollTop = st;
}
</script>

Added it to the site settings, published it, but it still does not work

19

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.