需要看插件使用方法的请戳 插件介绍   查看源码请戳 github地址

官方使用时单页应用，每一个区域对应一个相应的class，在menu中也要相互对应

源码前几行是参数定义，数组定义，下面是一些具体代码

$(window).scroll(function(event){    var st = $(this).scrollTop();    if (st > lastScrollTop){    scrollDir = 'down';    } else {    scrollDir = 'up';    }    lastScrollTop = st;    });

调用scroll，判断页面是向上还是向下滚动

$.fn.stickUp = function( options ) {    // adding a class to users div    $(this).addClass('stuckMenu');    //getting options    var objn = 0;    if(options != null) {    for(var o in options.parts) {    if (options.parts.hasOwnProperty(o)){    content[objn] = options.parts[objn];    objn++;    }    }

$fn.stickup里这段是首次调用时添加一个stuckMenu类以便之后的dom查找

options是参数，包括parts（添加菜单内容用来单页导航），itemsclass等等，options不会空时记录下parts中的内容

itemClass = options.itemClass;
itemHover = options.itemHover;

获取itemitemclass（每个menu菜单的类），itemHover（菜单被选中时添加的类）

if (options.topMargin != null) {if (options.topMargin == 'auto') {topMargin = parseInt($('.stuckMenu').css('margin-top'));} else {if (isNaN(options.topMargin) && options.topMargin.search("px") > 0) {topMargin = parseInt(options.topMargin.replace("px", ""));} else if (!isNaN(parseInt(options.topMargin))) {topMargin = parseInt(options.topMargin);} else {console.log("incorrect argument, ignored.");topMargin = 0;}}
} else {topMargin = 0;
}
menuSize = $('.' + itemClass).size();

options中有一个topMargin参数，如果不为空并为auto就获取当前导航栏的margin-top参数，如果不为auto就获取值

这里用isNaN判断传递的是纯数值还是带px的参数

当时单页应用时，menusize是获取导航栏中menu的个数，如下，menusize就是8，menu中每一个对应单页应用中的一部分

            stickyHeight = parseInt($(this).height());stickyMarginB = parseInt($(this).css('margin-bottom'));currentMarginT = parseInt($(this).next().closest('div').css('margin-top'));vartop = parseInt($(this).offset().top);

获取一些参数，便于后面的定位

$(document).on('scroll', function() {varscroll = parseInt($(document).scrollTop());

当滚动时，获取滚动的长度

    if (menuSize != null) {for (var i = 0; i < menuSize; i++) {contentTop[i] = $('#' + content[i] + '').offset().top;function bottomView(i) {contentView = $('#' + content[i] + '').height() * .4;testView = contentTop[i] - contentView;//console.log(varscroll);if (varscroll > testView) {$('.' + itemClass).removeClass(itemHover);$('.' + itemClass + ':eq(' + i + ')').addClass(itemHover);} else if (varscroll < 50) {$('.' + itemClass).removeClass(itemHover);$('.' + itemClass + ':eq(0)').addClass(itemHover);}}if (scrollDir == 'down' && varscroll > contentTop[i] - 50 && varscroll < contentTop[i] + 50) {$('.' + itemClass).removeClass(itemHover);$('.' + itemClass + ':eq(' + i + ')').addClass(itemHover);}if (scrollDir == 'up') {bottomView(i);}}}

当menusize不为空时将他们添加到contentTop中

17-20行中，判断滑动方向为向下时，如果滑动进入某一区域上边界上下50px范围内，就在导航栏中修改该区域对应的menu为active

21-22行，当向上滑时调用bottomView函数

9-11行，判断当前页面哪个区域占的部分更多，在导航栏中激活相应的选项

12-14行是判断页面第一个区域用的

if(vartop < varscroll + topMargin){    $('.stuckMenu').addClass('isStuck');    $('.stuckMenu').next().closest('div').css({    'margin-top': stickyHeight + stickyMarginB + currentMarginT + 'px'    }, 10);    $('.stuckMenu').css("position","fixed");    $('.isStuck').css({    top: '0px'    }, 10, function(){    });    };

官方使用中，该导航栏先是在页面中部，之后滑动以后固定在页面顶部，这里就是实现这一功能

vartop是固定的导航栏距离网页顶部的距离，当滑动和外边距超过这一部分后，就将导航栏固定

if(varscroll + topMargin < vartop){    $('.stuckMenu').removeClass('isStuck');    $('.stuckMenu').next().closest('div').css({    'margin-top': currentMarginT + 'px'    }, 10);    $('.stuckMenu').css("position","relative");    };

当页面向上滑动来到页面最初的位置时，就要将position修改为relative，使导航栏跟着做相应的滑动