Web/javascript/stickUp.js

这里只显示每个文件的开头 60 行。登录后可以解锁完整代码。

微信扫码关注公众号，代码整理好后第一时间通知你。

// 问题：不支持一个页面中多个元素固定（已实现）
//		 不支持固定方向的设置
//		 不支持回调事件（已实现）
//		 单页模式下，调整的定位是基于part参数的（重构后是基于html元素的data-menu）
//		 目前而言，许多操作是实时的——比如每次都重新查找、计算DOM
// 		 这种方法对网页变动比较大的情景是非常适用的，但比较耗费性能
//
//		 目前为止，缺乏测试
jQuery(function($) {
    "use strict";

    var Context = function() {},
        _ctxList = {},
        lastScrollTop = 0;
    Context.prototype = {
        // 配置参数
        dataProperty: 'data-menu',
        itemClass: '',
        itemHover: '',
        marginTop: 0,
        beforeStick: null,
        afterStick: null,
        beforeUnstick: null,
        afterUnstick: null,

        // 预留参数
        region: 'top',

        // 自动计算值
        // 私有参数
        _selector: '',
        _jqDom: null,
        _menuItems: [],
        _height: 0,
        _parentMarginTop: 0,
        _top: 0,
        _marginBottom: 0,
        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);