Question

in jQuery I always encounter alot of double work. I mean, I write the same thing for different divs.

I have the following code:

var about = $('#about').offset().top - parseFloat($('#about').css('margin-top').replace(/auto/, 0));
var education = $('#education').offset().top - parseFloat($('#education').css('margin-top').replace(/auto/, 0));
var work = $('#work').offset().top - parseFloat($('#work').css('margin-top').replace(/auto/, 0));

and

$(window).scroll(function (event) {
    // what the y position of the scroll is
    var y = $(this).scrollTop();

    // whether that's below the form
    if (y >= about) {
        // if so, ad the fixed class
        $('#nav li').removeClass('current');
        $('.ab_about').addClass('current');
    } else {
        // otherwise remove it
        $('.ab_about').removeClass('current');
    }

    // whether that's below the form
    if (y >= education) {
        // if so, ad the fixed class
        $('#nav li').removeClass('current');
        $('.ab_education').addClass('current');
    } else {
        // otherwise remove it
        $('.ab_education').removeClass('current');
    }

    // whether that's below the form
    if (y >= work) {
        // if so, ad the fixed class
        $('#nav li').removeClass('current');
        $('.ab_work').addClass('current');
    } else {
        // otherwise remove it
        $('.ab_work').removeClass('current');
    }

});

You can say that if I have 20 of those items, it’s gonna be a very long script 😛
Any idea on how to automate things and make it smaller. I tried something with the .each method, but that was a dead end for me.

Ty

Answer 1

u can just create a simple plugin and assign that plugin to those divs like:

$.fn.myplugin = function(options){
   var $this = $(this);
   var $navli = $(options.navli);
   var $abClass = $(options.abClass);
   var offset = $this.offset().top - parseFloat($this.css('margin-top').replace(/auto/, 0));
   $(window).scroll(function (event) {
        // what the y position of the scroll is
        var y = $(this).scrollTop();

        // whether that's below the form
        if (y >= offset) {
            // if so, ad the fixed class
            $navli.removeClass('current');
            $abClass.addClass('current');
        } else {
            // otherwise remove it
            $abClass.removeClass('current');
        }
    }
}

$(document).ready(function(){
    $('#about').myplugin({'navli': '#nav li', 'abClass': '.ab_about'});
});