jquery - FullPage.js - add active class to menu anchor when on a nonematching section -


okay, title might bit hard understand, i'll try , explain.

so i'm using fullpage.js

i have in total 9 sections: home about(about has 6 "undersections" continuation of first section) contact

in menu there 3 navigation options home, about, contact. i've made menu active class added when on corresponding section - done ready made options. when scroll , leave first section active class remove , menu item not highlighted. here's thing want active class remain on "undersections" of about. menu item "about" highlighted until contact section.

i thought i'd make work "outside" js depending on url class added anchor id "all-about":

$(document).ready(function () {             if (location.href.match(/#about1/ig) || location.href.match(/#about2/ig)){                 $('#all-about').addclass('active');             }         }); 

this not work. in fullpage js change or how change code work?

thanks!

i make use of plugin callbacks achieve that.

you make use of afterload this:

$.fn.fullpage({     slidescolor: ['red', 'blue'],     afterload: function(anchor, index){         var activeitem;          if(index == 1 || index == 2 || index == 3){             activeitem = $('#menu').find('li').first()         }else{              activeitem = $('#menu').find('li').last()             }          activeitem             .addclass('active')             .siblings().removeclass('active');     } }); 

note i'm not using menu option anymore handle active class wish.

live example


Comments

Popular posts from this blog

c# - How to get the current UAC mode -

postgresql - Lazarus + Postgres: incomplete startup packet -

javascript - Ajax jqXHR.status==0 fix error -