Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
robroy

Problems Creating Sticky Nav

Recommended Posts

Hi,
I'm new to gsap and would like to create a normal sticky nav menu with few animations which changes classes on scroll up or down.
This is what I am trying to achieve: If you scroll down the menu stays at the top "hidden" but if the user scrolls up a bit the menu should get "sticky visible" and if he continuous to scroll down again "hidden" again.
I just can't get this to work with the toggleActions and toggleClass 🙈
Thanks,

See the Pen vYLpgGY by linkslegend (@linkslegend) on CodePen

Link to post
Share on other sites

Hey Rob and welcome to the GreenSock forums! 

 

We made something like this before. It might be a good start for you:

See the Pen mdVyPvK by GreenSock (@GreenSock) on CodePen

  • Like 3
Link to post
Share on other sites

Hi!
Thanks for the example! 
So I added this and it's working now! :) Or is there a better way to do this? Sorry im new to this
 

  onUpdate: self => {
    console.log("progress:", self.progress.toFixed(3), "direction:", self.direction);
            let { direction } = self;
            const featureBoxes = document.querySelectorAll('.main-menu');
 
            if (direction == -1) {
                featureBoxes[0].classList.add('is-sticky')
                featureBoxes[0].classList.remove('is-hidden')
            } else if (direction == 1) {
                featureBoxes[0].classList.add('is-hidden')
                featureBoxes[0].classList.remove('is-sticky')
            }
      }

Thanks!
 

 

Link to post
Share on other sites
57 minutes ago, robroy said:

I added this and it's working now! :) Or is there a better way to do this?

Why not use the approach that is used in the demo above? All of what you have there is exactly what toggleClass does for you...

Link to post
Share on other sites

I somehow don't get how to add and remove 2 classes classes like I did it with the code i'm using now 😕

Link to post
Share on other sites

Yes, you'd have to either rework your classes to only need one or use two ScrollTriggers.

Link to post
Share on other sites

Hi Zach, thanks for this nice navbar code! 

If I want to make the navbar unstick after scrolling down 300px, do I create an extra scrolltrigger for that? example here: https://facultydept.com/esteban-del-rio

 

thank you,

joost

 

Link to post
Share on other sites

Hey weddje and welcome to the GreenSock forums.

 

5 hours ago, weddje said:

If I want to make the navbar unstick after scrolling down 300px, do I create an extra scrolltrigger for that?

Sure, that's a good option. There are multiple ways of setting it up.

  • Like 1
Link to post
Share on other sites

Hi Zach, I've added a second trigger, but this one is not triggering:

ScrollTrigger.create({
  start: 'top -50',
  end: 99999,
  toggleClass: {className: 'jwpnavbar--scrolled', targets: '.jwpnavbar'}
});


gsap.from(".jwpnavbar--scrolled", {
  position:"absolute", 
      scrollTrigger: {
      trigger:".jwpnavbar--scrolled",
      start: 'top -300',
      end: 99999,   
    }
}) 

See the Pen BazvJwZ by weddje (@weddje) on CodePen

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.

×