jQuery插件stickup.js 源码解析初步

 

这里只是一个初步的解析

 

stickup.js是一个简单的jQuery插件，源代码只有100多行，它能让页面目标元素 “固定” 在浏览器窗口的顶部，即便页面在滚动，目标元素仍然能出现在设定的位置。

介绍：http://www.bootcss.com/p/stickup/

源码地址：https://github.com/LiranCohen/stickUp

 

同时，还有一个改进版本可以参考：http://www.cnblogs.com/vans/p/3789416.html

源码地址：https://github.com/VanMess/stickUp

jQuery(function($) {
    
    $(document).ready(function(){
        var contentButton = [];
        var contentTop = [];
        var content = [];
        var lastScrollTop = 0;
        var scrollDir = '';
        var itemClass = '';
        var itemHover = '';
        var menuSize = null;
        var stickyHeight = 0;
        var stickyMarginB = 0;
        var currentMarginT = 0;
        var topMargin = 0;


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

        /***********************************************************/
        $.fn.stickUp = function( options ) {
            // adding a class to users div
            $(this).addClass('stuckMenu');
            //getting options
            var objn = 0;    //objn表示导航条对象有n个
            if(options != null) {
                for(var o in options.parts) {    //option.parts指导航条对象
                    if (options.parts.hasOwnProperty(o)){
                        content[objn] = options.parts[objn];    //content对象是options.parts的深拷贝
                        objn++;
                    }
                }
                  if(objn == 0) {
                      console.log('error:needs arguments');
                  }

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

                  itemTop = options.topLength;    //新添加

                  if(options.topMargin != null) {
                      if(options.topMargin == 'auto') {
                          topMargin = parseInt($('.stuckMenu').css('margin-top'));
                      } else {
                          //如果以px结尾的topMargin，如options.topMargin:10px,则topMargin=10    此处是否有bug，如 abcpx
                          if(isNaN(options.topMargin) && options.topMargin.search("px") > 0){
                              topMargin = parseInt(options.topMargin.replace("px",""));
                          //如果topMargin是数字，如options.topMargin:10,则topMargin=10                          
                          } else if(!isNaN(parseInt(options.topMargin))) {
                              topMargin = parseInt(options.topMargin);
                          } else {
                              //既不是数字，也不是以px结尾，也不是auto，那么就默认为0
                              console.log("incorrect argument, ignored.");
                              topMargin = 0;
                          }    
                      }
                  } else {
                      topMargin = 0;
                  }
                  menuSize = $('.'+itemClass).size();    //menuSize指jQuery选择器匹配的元素的数量
              }
            stickyHeight = parseInt($(this).height());
            stickyMarginB = parseInt($(this).css('margin-bottom'));
            currentMarginT = parseInt($(this).next().closest('div').css('margin-top'));
            vartop = parseInt($(this).offset().top);

            varleft = parseInt($(this).offset().left);    //新添加
            varParentWidth = parseInt($(this).parent().offset().width());    //新添加:计算菜单栏悬浮时的宽度
            varParentLeft = parseInt($(this).parent().offset().left);    //新添加:计算菜单栏悬浮时的距离在屏幕左边的宽度

            //$(this).find('*').removeClass(itemHover);
        }

        //document对象绑定滚动事件，通过监听滚轮位置来识别内容位置，给导航栏切换对应样式
        $(document).on('scroll', function() {
            //scrollTop()方法返回或设置匹配元素的滚动条的垂直位置。
            //如果该方法未设置参数，则返回以像素计的相对滚动条顶部的偏移。
            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;    //当前内容区域高度的 0.4
                        testView = contentTop[i] - contentView;    //当前内容区域往上
                        //console.log(varscroll);
                        if(varscroll > testView){
                            $('.'+itemClass).removeClass(itemHover);
                            $('.'+itemClass+':eq('+i+')').addClass(itemHover);    //eq() jQuery遍历方法，下标从0开始
                        }
                        //只距离顶部50px，则默认为导航条的第0个对象 
                        else if(varscroll < 50){    
                            $('.'+itemClass).removeClass(itemHover);
                            $('.'+itemClass+':eq(0)').addClass(itemHover);
                        }
                    }

                    //滚轮往下走，而且偏移量大于当前内容位置往上50px，且小于往下50px时，
                    //即表示当前内容选中，为当前内容的在导航条上的项目添加active样式
                    if(scrollDir == 'down' && varscroll > contentTop[i]-50 && varscroll < contentTop[i]+50) {
                        $('.'+itemClass).removeClass(itemHover);
                        $('.'+itemClass+':eq('+i+')').addClass(itemHover);
                    }
                    //如果滚轮往上走，则调用上面的函数判断
                    if(scrollDir == 'up') {
                        bottomView(i);
                    }
                }
            }


            /* 参考示例
            if(scrollDir == 'up') {
                for(var i=1;i < menuSize;i++)
                {
                    //滚轮往上走的时候默认100以内的宽度让上方的项目增加active样式
                    if(varscroll > $('#'+content[i-1]+'').offset().top && varscroll < $('#'+content[i]+'').offset().top-100){
                        $('.'+itemClass).removeClass(itemHover);
                        $('.'+itemClass+':eq('+(i-1)+')').addClass(itemHover);
                    }
                }
            }*/



            //两个IF判断滚轮位置是否超过导航条距离屏幕上方高度，
            //如果超过了，就让导航条浮起来，相反就让导航条回到文档流中
            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(){

                });
            };

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

        });
    });

});