jQuery.stickUp插件重构

 1  $(document).on(‘scroll‘, function() {
 2                 varscroll = parseInt($(document).scrollTop());
 3                 if (menuSize != null) {
 4                     for (var i = 0; i < menuSize; i++) {
 5                         contentTop[i] = $(‘#‘ + content[i] + ‘‘).offset().top;
 6 
 7                         function bottomView(i) {
 8                             contentView = $(‘#‘ + content[i] + ‘‘).height() * .4;
 9                             testView = contentTop[i] - contentView;
10                             //console.log(varscroll);
11                             if (varscroll > testView) {
12                                 $(‘.‘ + itemClass).removeClass(itemHover);
13                                 $(‘.‘ + itemClass + ‘:eq(‘ + i + ‘)‘).addClass(itemHover);
14                             } else if (varscroll < 50) {
15                                 $(‘.‘ + itemClass).removeClass(itemHover);
16                                 $(‘.‘ + itemClass + ‘:eq(0)‘).addClass(itemHover);
17                             }
18                         }
19                         if (scrollDir == ‘down‘ && varscroll > contentTop[i] - 50 && varscroll < contentTop[i] + 50) {
20                             $(‘.‘ + itemClass).removeClass(itemHover);
21                             $(‘.‘ + itemClass + ‘:eq(‘ + i + ‘)‘).addClass(itemHover);
22                         }
23                         if (scrollDir == ‘up‘) {
24                             bottomView(i);
25                         }
26                     }
27                 }
28 
29 
30 
31                 if (vartop < varscroll + topMargin) {
32                     $(‘.stuckMenu‘).addClass(‘isStuck‘);
33                     $(‘.stuckMenu‘).next().closest(‘div‘).css({
34                         ‘margin-top‘: stickyHeight + stickyMarginB + currentMarginT + ‘px‘
35                     }, 10);
36                     $(‘.stuckMenu‘).css("position", "fixed");
37                     $(‘.isStuck‘).css({
38                         top: ‘0px‘
39                     }, 10, function() {
40 
41                     });
42                 };
43 
44                 if (varscroll + topMargin < vartop) {
45                     $(‘.stuckMenu‘).removeClass(‘isStuck‘);
46                     $(‘.stuckMenu‘).next().closest(‘div‘).css({
47                         ‘margin-top‘: currentMarginT + ‘px‘
48                     }, 10);
49                     $(‘.stuckMenu‘).css("position", "relative");
50                 };
51 
52             });

 1 var Context = function() {},
 2         _ctxList = {},
 3         lastScrollTop = 0;
 4     Context.prototype = {
 5         dataProperty: ‘data-menu‘,
 6         selector: ‘‘,
 7         itemClass: ‘‘,
 8         itemHover: ‘‘,
 9         jqDom: null,
10         menuItems: [],
11         region: ‘top‘,
12         height: 0,
13         parentMarginTop: 0,
14         top: 0,
15         marginTop: 0,
16         marginBottom: 0,
17         beforeStick: null,
18         afterStick: null,
19         beforeUnstick: null,
20         afterUnstick: null
21 };

onScroll: function(scrollDir, varscroll) {
            var contentView = null,
                testView = null,
                _me = this;

            // 计算并给适当元素添加 itemHover 类
            if ( !! _me.menuItems && _me.menuItems.length > 0) {
                var offset = null,
                    contentTop = 0,
                    tmp_menuTarget = null;
                for (var i = 0; i < _me.menuItems.length; i++) {
                    tmp_menuTarget = $(‘#‘ + $(_me.menuItems[i]).attr(_me.dataProperty));
                    offset = tmp_menuTarget.offset();
                    contentTop = !! offset ? offset.top : 0;

                    // 之前這裡定義了一個bottomView
                    // 会在每次执行这个地方的时候都去创建一个函数
                    // 实际上是很没必要的性能损耗，所以这里将代码移动下面
                    if (scrollDir == ‘down‘ &&
                        varscroll > contentTop - 50 &&
                        varscroll < contentTop + 50) {
                        _me.jqDom.find(‘.‘ + _me.itemClass).removeClass(_me.itemHover);
                        _me.jqDom.find(‘.‘ + _me.itemClass + ‘:eq(‘ + i + ‘)‘).addClass(_me.itemHover);
                    }
                    if (scrollDir == ‘up‘) {
                        // 这里就是原来的bottomView代码
                        contentView = tmp_menuTarget.height() * 0.4;
                        testView = contentTop - contentView;
                        if (varscroll > testView) {
                            _me.jqDom.find(‘.‘ + _me.itemClass).removeClass(_me.itemHover);
                            _me.jqDom.find(‘.‘ + _me.itemClass + ‘:eq(‘ + i + ‘)‘).addClass(_me.itemHover);
                        } else if (varscroll < 50) {
                            _me.jqDom.find(‘.‘ + _me.itemClass).removeClass(_me.itemHover);
                            _me.jqDom.find(‘.‘ + _me.itemClass + ‘:eq(0)‘).addClass(_me.itemHover);
                        }
                    }
                }
            }

            // 固定菜单栏目，使之固定（fixed）
            if (_me.top < varscroll + _me.marginTop) {
                if ( !! _me.beforeStick) _me.beforeStick.call(_me);
                _me.jqDom.addClass(‘isStuck‘);
                if ( !! _me.afterStick) _me.afterStick.call(_me);
                _me.jqDom.next().closest(‘div‘).css({
                    ‘margin-top‘: _me.height + _me.marginBottom + _me.parentMarginTop + ‘px‘
                }, 10);
                _me.jqDom.css("position", "fixed");
                _me.jqDom.css({
                    top: ‘0px‘
                }, 10);
            };

            // 菜單欄目，使之不固定（relative）
            if (varscroll + _me.marginTop < _me.top) {
                if ( !! _me.beforeUnstick) _me.beforeUnstick.call(_me);
                _me.jqDom.removeClass(‘isStuck‘);
                if ( !! _me.afterUnstick) _me.afterUnstick.call(_me);
                _me.jqDom.next().closest(‘div‘).css({
                    ‘margin-top‘: _me.parentMarginTop + ‘px‘
                }, 10);
                _me.jqDom.css("position", "relative");
            };
        }