Reconstruction of jQuery. stickUp plug-in

Copy code 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 = 'low' & 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 ('isbucket'); 33 values ({34 'margin-top': stickyHeight + stickyMarginB + currentMarginT + 'px '35}, 10); 36 values ('.stuckmenu'detail .css ("position ", "fixed"); 37 values ('.isstuck'{.css ({38 top: '0px '39}, 10, function () {40 41}); 42 }; 43 44 if (varscroll + topMargin <vartop) {45 $ ('. stuckMenu '). removeClass ('is Stuck '); 46 blocks ({47 'margin-top': currentMarginT + 'px '48}, 10); 49 blocks ('.stuckmenu'{.css ("position", "relative "); 50}; 51 52}); copy the Code. However, during actual use, we still find many inconveniences. It only supports the last call (because it is a variable storage implemented by the closure, but every time init is based on the same set of variables, there are some undeclared variable calls (that is, global variables, which is a bad programming habit) and some unnecessary function declarations, as a result, some unnecessary Performance Losses (such as the bottomView function in the above Code) do not support callback functions and cannot support complex single-page websites, when the page scrolls to the block specified by the parts parameter, the itemHover class is added to the corresponding menu block (see http://lirancohen.git Hub. io/stickUp/), parts is an extra specified parameter, and the menu items corresponding to each id in parts are based on the order of parts parameters, this is an unstable structure (the Chinese teacher died early. Let's take a look at it. The original stickUp project has not been updated in github for a long time, so I decided to generate a branch for fork, then refactor the stickUp plug-in. My Project address is: plugin .... Of course, it would be better if any great god could make some comments. The new stickUp code consists of the Context class, the Context. _ init _ initialization function, and the Context. onScroll rolling processing function. Context is a Context data structure used to record the Context information of each call. This solves the preceding 1st problems. The Code is as follows: Copy code 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: parentMarginTop: top: marginTop: marginBottom: beforeStick: null, 18 afterStick: null, 19 beforeUnstick: null, 20 afterUnstick: null21}; copy the meaning and usage of each item of the code. We suggest you look at the source code. Context. _ init _ is an initialization function, a factory that accepts an option parameter and converts it into a Context instance. Note, the _ ctxList variable is used to store all Context information in history. The Code is as follows. prototype. onScroll class, used to process page rolling events, is the core of the entire stickUp. The Code is as follows: copy the code onScroll: function (scrollDir, varscroll) {var contentView = null, testView = null, _ me = this; // calculate and add the itemHover class 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; // previously, a bottomView is defined here. // A bottomView is created every time a function is executed. // It is actually unnecessary performance loss, so here we move the code below 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') {// The original bottomView code contentView = tmp_menuTa Rget. 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 the menu bar to fix (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'hangzhou.css ({'margin-top': _ me. height + _ me. marginBottom + _ me. parentMarginTop + 'px '}, 10); _me.jqDom.css ("position", "fixed"); _me.jqDom.css ({top: '0px'}, 10 );}; // The list of dishes to make it unfixed (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'hangzhou.css ({'margin-top': _ me. parentMarginTop + 'px '}, 10); _me.jqDom.css ("position", "relative ");};}