Menu hides on scroll but appears when scroll stop

Pinegrow Interactions Add-on
,
1

I’m trying to get my fixed Navbar to disappear as I scroll down but appear when I stop scrolling. Similarly disappear when I scroll up and appear again when the scroll stops. I’ve been trying for a good couple of hours with no success. There is an old tutorial that shows how to do this but it includes setting the fixed position with interactions:I’ve already done this with css. Any help would be greatly appreciated.

2

Hello :slight_smile:

I don’t use the interactions plugin (because of its limitations) with PG but it’s based off of GreenSock so you may be able to hand-code a solution. Here is some code I used for a mobile, fixed cta bar that hides/shows as you scroll down/up. You can do the same thing for a header as well.

  let mobile_menu = gsap.timeline({
    scrollTrigger: {
      trigger: "#site_content",
      toggleActions: "play none none none",
      start: "top top",
      end: "bottom bottom",
      onUpdate: (self) => {
          if(self.direction == -1){
            mobile_menu.reverse();
          } else if (self.direction == 1){
            mobile_menu.play();
          }
      }

    }
  });

  mobile_menu.to("#menu_items", { duration: 1, bottom: -400 });
1 Like
3

Thank you so much for the reply, I had almost given up on making that work. I will try and let you know how it goes.