Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x | /**
* IOS sticky 效果 polyfill
* - requires jQuery/Zepto
* @method fx/sticky
* @param {Object} node 目标DOM元素
* @param {Object} options 选项
* @param {Boolean} [options.clone=true] 是否创建一个 clone 元素
* @param {Object} [options.placeholder=null] sticky 效果启动时的占位 dom 元素
* @param {Boolean} [options.disableAndroid=false] 是否在 Android 下停用 sticky 效果
* @param {Object} [options.offsetParent=null] 提供一个相对定位元素来匹配浮动时的定位样式
* @param {Object} [options.styles={}] 进入 sticky 状态时的样式
* @example
* var $sticky = require('@spore-ui/kit/packages/fx/sticky');
* $sticky($('h1').get(0));
*/
function sticky(node, options) {
var $ = window.$ || window.Zepto || window.jQuery;
var $win = $(window);
var $doc = $(document);
var ua = navigator.userAgent;
var isIOS = !!ua.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/i);
var isAndroid = ua.indexOf('Android') > -1 || ua.indexOf('Linux') > -1;
var that = {};
that.isIOS = isIOS;
that.isAndroid = isAndroid;
var conf = $.extend({
clone: true,
placeholder: null,
disableAndroid: false,
offsetParent: null,
styles: {},
}, options);
that.root = $(node);
Iif (!that.root.get(0)) { return; }
that.offsetParent = that.root.offsetParent();
Iif (conf.offsetParent) {
that.offsetParent = $(conf.offsetParent);
}
Iif (!that.offsetParent[0]) {
that.offsetParent = $(document.body);
}
that.isSticky = false;
Iif (conf.placeholder) {
that.placeholder = $(conf.placeholder);
} else {
that.placeholder = $('<div/>');
}
Eif (conf.clone) {
that.clone = that.root.clone();
that.clone.appendTo(that.placeholder);
}
that.placeholder.css({
visibility: 'hidden',
});
that.sticky = function () {
Eif (!that.isSticky) {
that.isSticky = true;
that.root.css('position', 'fixed');
that.root.css(conf.styles);
that.placeholder.insertBefore(that.root);
}
};
that.unSticky = function () {
if (that.isSticky) {
that.isSticky = false;
that.placeholder.remove();
that.root.css('position', '');
$.each(conf.styles, function (key) {
that.root.css(key, '');
});
}
};
var origOffsetY = that.root.get(0).offsetTop;
that.checkScrollY = function () {
Eif (!that.isSticky) {
origOffsetY = that.root.get(0).offsetTop;
}
var scrollY = 0;
Eif (that.offsetParent.get(0) === document.body) {
scrollY = window.scrollY;
} else {
scrollY = that.offsetParent.get(0).scrollTop;
}
Eif (scrollY > origOffsetY) {
that.sticky();
} else {
that.unSticky();
}
Eif (that.isSticky) {
that.root.css({
width: that.placeholder.width() + 'px',
});
} else {
that.root.css({
width: '',
});
}
};
that.init = function () {
Iif (isAndroid && conf.disableAndroid) {
return;
}
Iif (isIOS && that.offsetParent.get(0) === document.body) {
// IOS9+ 支持 position:sticky 属性
that.root.css('position', 'sticky');
} else {
// 一般浏览器直接支持
Eif (that.offsetParent.get(0) === document.body) {
$win.on('scroll', that.checkScrollY);
} else {
that.offsetParent.on('scroll', that.checkScrollY);
}
$win.on('resize', that.checkScrollY);
$doc.on('touchstart', that.checkScrollY);
$doc.on('touchmove', that.checkScrollY);
$doc.on('touchend', that.checkScrollY);
that.checkScrollY();
}
};
that.init();
return that;
}
module.exports = sticky;
|