I have read all the questions and answers on this topic. This should be a simple task, but I cannot get it to work.
JQuery version of Waypoints is working fine on top menu items, on one page site. I want to disable it upon clicking these menu items, and then restore it. I haven't gotten to the restore part yet. When I call the disable function I get a "TypeError: e.disable not a function". Commented lines show all the ways I have tried to include the disable() function:
var waypoints = $('section.waypoint').waypoint({
handler:function(){
var hash = '#'+this.element.id;
$('#menu-main-menu li.active').removeClass('active');
$('#menu-main-menu li a[href='+ hash +']').parent('li').addClass('active');
window.console.log($(window).scrollTop());
if($(window).scrollTop() < 500){
$('#menu-main-menu li.active').removeClass('active');
}
//$('#menu-main-menu li a').on('click', function(){
//this.disableAll();
//});
},
offset: '30%',
continuous: false
});
//waypoints.disable();
//Clicking the menu item link and animation
$('.jumbotron a, #menu-main-menu li a').on('click', function(e) {
e.preventDefault();
//$(waypoints).disable();
//$(waypoints).disableAll();
//waypoints.disable();
//waypoints.disableAll();
$('#menu-main-menu li.active').removeClass('active');
if (location.pathname.replace(/^\//,'') === this.pathname.replace(/^\//,'') && location.hostname === this.hostname) {
var $target = $(this.hash);
$target = $target.length && $target || $('[name="' + this.hash.slice(1) +'"]');
if ($target.length) {
var targetOffset = $target.offset().top - 45;
$('html, body').animate({scrollTop: targetOffset}, 1000);
}
}
});
I realize that waypoints is an array, so have tried disableAll() and iteration. No dice. Thanks in advance for your help!