Hide div when scrolled to specific anchor points using Fullpage.js

Question

I plan to use the fantastic Fullpage.js from http://alvarotrigo.com/fullPage/ but would like to hide specific divs or images when scrolled to a specific anchor point.

For example if the page starts at #home & has 3 anchor points (full screen sections) #home, #biog & #email all with a logo at the top of each section i would like for instance for the logo from #biog to hide (perhaps with fade out) but reshow (perhaps with fade in) when scrolled to the next anchor point #email

Can this be done?

Thanks for the help...

Answer 1

The proper way to do it is using fullPage events. In this case: afterLoad or onLeave Take a look at the documentation for more information about how to use them.

You can take a look at this living example in which the top menu fades In or out depending on whether the user is in the first section or not: http://jsfiddle.net/J8hqM/8/

It should look like:

  // Script FullPage
  $.fn.fullpage({
      /* whatever config you have...*/
      afterLoad: function(anchor, index){
          if(index == 1){
               $('#menu').fadeOut();
          }else{
               $('#menu').fadeIn();   
          }
      }
  });

Answer 2

You could use jquery's $(window).bind( 'hashchange' function.

$(window).bind( 'hashchange', function() {
    var winloc = window.location.href;
    if (winloc.substring(1) === "Yourpage") {
    //do something. For example:
    $("#Yourlogo").css('display', 'none');
    }
});