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.
Comments
Post a Comment