Jump to content
Search Community

Problems Creating Sticky Nav

robroy test
Moderator Tag

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 comment
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 comment
Share on other sites

  • 4 months later...

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 comment
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.
×
×
  • Create New...