Welcome to the in5 Answer Exchange! This a place to get answers about in5 (InDesign to HTML5) and make requests.
0 votes
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
in how_to by (1.3k points)
  

1 Answer

0 votes
 
Best answer

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);
             }
        });
    });
by (10.6k points)
selected by
Very cool, thanks!
I'm happy to help. :)