Is there a way to animate a fixed element that is scroll triggered?

Question

I have a horizontal navbar that I would like to have fade in at the top of the screen after the first page of my document scrolls halfway off, so I'm using the scroll trigger option, 500px from the top. But there doesn't seem to be a way to trigger the fade in that way. The page load trigger seems to ignore the scroll trigger.

Is there a way to make the scroll trigger also the trigger for the animation?

I was thinking I could just put the navbar on all the other pages, mark it as fixed, and have it fade in for just the second page. That would be fine but if there's a way to use the scroll trigger that would be best.

Thanks, and sorry for the long question!

Maurice

I'm using the borderless scrolling option

Answer 1

Hi Maurice, 

You can add the following JS (based on this post from Stack Overflow) in the Resources section to make the menu fade in when it reaches 500 px or fade out if you scroll back up:

$(document).ready(function(){
       $(window).bind('scroll', function() {
       var distance = 500;
             if ($(window).scrollTop() > distance) {
                 $('nav').fadeIn(500);
             }
             else {
                 $('nav').fadeOut(500);
             }
        });
    });

Comments

Very cool, thanks!

---

I'm happy to help. :)