jquery call a function each time a class has changed

Question

This is the markup for my navigation:

<div class="navigation navigation-fixed-top">
<a href="#home" class="active">Home</a>
<a href="#about">About</a>
</div>

And I have this jquery script, which is checking if href="#home" has class active to do something and if not to do something else.

This is the code:

var isActive = $('a[href="#home"]').hasClass('active');
$(".navigation")
.toggleClass("navigation-fixed-bottom", isActive)
.toggleClass("navigation-fixed-top", !isActive);

This is partially working because the class="active" is added automatically when I'm going the #about section or I'm clicking on it. It does this without refreshing the page so I need a way to to make this work without refreshing the page.

Any suggestions on how can I do this with jQuery/Javascript ?

UPDATE: this is the name of the plugin Scrollit.js THIS IS THE CODE RESPONSIBLE FOR ADDING THE ACTIVE CLASS ON THE NAVIGATION ELEMENTS:

(function($) {
'use strict';

var pluginName = 'ScrollIt',
    pluginVersion = '1.0.3';

/*
 * OPTIONS
 */
var defaults = {
    upKey: 38,
    downKey: 40,
    easing: 'linear',
    scrollTime: 600,
    activeClass: 'active',
    onPageChange: null,
    topOffset : 0
};

$.scrollIt = function(options) {

    /*
     * DECLARATIONS
     */
    var settings = $.extend(defaults, options),
        active = 0,
        lastIndex = $('[data-scroll-index]:last').attr('data-scroll-index');

    /*
     * METHODS
     */

    /**
     * navigate
     *
     * sets up navigation animation
     */
    var navigate = function(ndx) {
        if(ndx < 0 || ndx > lastIndex) return;

        var targetTop = $('[data-scroll-index=' + ndx + ']').offset().top + settings.topOffset + 1;
        $('html,body').animate({
            scrollTop: targetTop,
            easing: settings.easing
        }, settings.scrollTime);
    };

    /**
     * doScroll
     *
     * runs navigation() when criteria are met
     */
    var doScroll = function (e) {
        var target = $(e.target).closest("[data-scroll-nav]").attr('data-scroll-nav') ||
        $(e.target).closest("[data-scroll-goto]").attr('data-scroll-goto');
        navigate(parseInt(target));
    };

    /**
     * keyNavigation
     *
     * sets up keyboard navigation behavior
     */
    var keyNavigation = function (e) {
        var key = e.which;
        if(key == settings.upKey && active > 0) {
            navigate(parseInt(active) - 1);
            return false;
        } else if(key == settings.downKey && active < lastIndex) {
            navigate(parseInt(active) + 1);
            return false;
        }
        return true;
    };

    /**
     * updateActive
     *
     * sets the currently active item
     */
    var updateActive = function(ndx) {
        if(settings.onPageChange && ndx && (active != ndx)) settings.onPageChange(ndx);

        active = ndx;
        $('[data-scroll-nav]').removeClass(settings.activeClass);
        $('[data-scroll-nav=' + ndx + ']').addClass(settings.activeClass);
    };

    /**
     * watchActive
     *
     * watches currently active item and updates accordingly
     */
    function navPosition() {
    $('[data-scroll-nav]').toggleClass('navigation-fixed-bottom navigation-fixed-top');
    }
    var updateActive = function(ndx, navPosition) {
    var watchActive = function() {
        var winTop = $(window).scrollTop();

        var visible = $('[data-scroll-index]').filter(function(ndx, div) {
            return winTop >= $(div).offset().top + settings.topOffset &&
            winTop < $(div).offset().top + (settings.topOffset) + $(div).outerHeight()
        });
        var newActive = visible.first().attr('data-scroll-index');
        updateActive(newActive);
    };

    /*
     * runs methods
     */
    $(window).on('scroll',watchActive).on('scroll');

    $(window).on('keydown', keyNavigation);

    $('body').on('click','[data-scroll-nav], [data-scroll-goto]', function(e){
        e.preventDefault();
        doScroll(e);
    });

};
}(jQuery));

Answer 1

$('[data-scroll-nav]').removeClass(settings.activeClass)
    .toggleClass('navigation-fixed-bottom navigation-fixed-top');

and/or

$('[data-scroll-nav=' + ndx + ']').addClass(settings.activeClass)
    .toggleClass('navigation-fixed-bottom navigation-fixed-top');

If you wanted to keep the original code cleaner, you could do a callback:

function myCallBackFunction() {
    $('[data-scroll-nav]').toggleClass('navigation-fixed-bottom navigation-fixed-top');
}
var updateActive = function(ndx, myCallbackFunction) {..}

Answer 2

use jquery on to bind handlers to events you want to respond $("a.active").on('click',function(){});