Skip to content

Commit

Permalink
rebuild package
Browse files Browse the repository at this point in the history
  • Loading branch information
@afc163
afc163 committed Jun 25, 2013
1 parent ea1c1dc commit 18f0b4f
Show file tree
Hide file tree
Showing 2 changed files with 131 additions and 140 deletions.
269 changes: 130 additions & 139 deletions dist/sticky-debug.js
View file
Original file line number Diff line number Diff line change
@@ -1,187 +1,182 @@
define("arale/sticky/1.2.1/sticky-debug", [ "$-debug" ], function(require, exports, module) {
var $ = require("$-debug"), doc = $(document), stickyPrefix = [ "-webkit-", "-ms-", "-o-", "-moz-", "" ], // 只需判断是否是 IE 和 IE6
ua = (window.navigator.userAgent || "").toLowerCase(), isIE = ua.indexOf("msie") !== -1, isIE6 = ua.indexOf("msie 6") !== -1, guid = 0;
var _isPositionStickySupported = checkPositionStickySupported(), _isPositionFixedSupported = checkPositionFixedSupported();
function Fixed(options) {
this.options = options;
var $ = require("$-debug"), doc = $(document), stickyPrefix = [ "-webkit-", "-ms-", "-o-", "-moz-", "" ], guid = 0, // 只需判断是否是 IE 和 IE6
ua = (window.navigator.userAgent || "").toLowerCase(), isIE = ua.indexOf("msie") !== -1, isIE6 = ua.indexOf("msie 6") !== -1;
var isPositionStickySupported = checkPositionStickySupported(), isPositionFixedSupported = checkPositionFixedSupported();
// Sticky
// 实现侧边栏跟随滚动的效果
// 当滚动条滚动到一定距离时，指定区域变为 sticky 效果开始跟随页面
// ---
function Sticky(options) {
this.options = options || {};
this.elem = $(this.options.element);
this.callback = options.callback || function() {};
this.marginTop = options.marginTop || 0;
this._stickyId = guid++;
}
Fixed.prototype.render = function() {
var self = this, elem = self.elem = $(self.options.element);
Sticky.prototype.render = function() {
var self = this;
// 一个元素只允许绑定一次
if (!elem.length || elem.data("bind-fixed")) return;
if (!this.elem.length || this.elem.data("bind-sticked")) {
return;
}
// 记录元素原来的位置
self._originTop = elem.offset().top;
self.marginTop = $.isNumeric(self.options.marginTop) ? Math.min(self.options.marginTop, self._originTop) : self._originTop;
self._originStyles = {
this._originTop = this.elem.offset().top;
// 表示需要 fixed，不能用 position:sticky 来实现
if (this.marginTop === Number.MAX_VALUE) {
var callFix = true;
// 表示调用了 sticky.fix
this.marginTop = this._originTop;
}
this._originStyles = {
position: null,
top: null,
left: null
};
// 保存原有的样式
for (var style in self._originStyles) {
if (self._originStyles.hasOwnProperty(style)) {
self._originStyles[style] = elem.css(style);
for (var style in this._originStyles) {
if (this._originStyles.hasOwnProperty(style)) {
this._originStyles[style] = this.elem.css(style);
}
}
var scrollFn = stick.isPositionFixedSupported ? $.proxy(self._supportFixed, self) : $.proxy(self._supportAbsolute, self);
if (!stick.isPositionFixedSupported) {
var scrollFn;
// sticky.fix 无法用 sticky 方式来实现
if (sticky.isPositionStickySupported && !callFix) {
scrollFn = this._supportSticky;
} else if (sticky.isPositionFixedSupported) {
scrollFn = this._supportFixed;
} else {
scrollFn = this._supportAbsolute;
// ie6
// avoid floatImage Shake for IE6
// see: https://github.com/lifesinger/lifesinger.github.com/blob/master/lab/2009/ie6_fixed_position_v4.html
$("<style type='text/css'> * html { background:url(null) no-repeat fixed; } </style>").appendTo("head");
// see: https://github.com/lifesinger/lifesinger.
// github.com/blob/master/lab/2009/ie6sticked_position_v4.html
$("<style type='text/css'> * html" + "{ background:url(null) no-repeat fixed; } </style>").appendTo("head");
}
// 先运行一次
scrollFn();
scrollFn.call(this);
// 监听滚动事件
// fixed 是本模块绑定的滚动事件的命名空间
$(window).on("scroll." + self._stickyId, function() {
if (!elem.is(":visible")) return;
scrollFn();
$(window).on("scroll." + this._stickyId, function() {
if (!self.elem.is(":visible")) {
return;
}
scrollFn.call(self);
});
elem.data("bind-fixed", true);
return self;
// 标记已定位
this.elem.data("bind-sticked", true);
return this;
};
Fixed.prototype._supportFixed = function() {
var self = this, elem = self.elem, originTop = self._originTop, marginTop = self.marginTop;
Sticky.prototype._supportFixed = function() {
// 计算元素距离当前窗口上方的距离
var distance = originTop - doc.scrollTop();
var distance = this._originTop - doc.scrollTop();
// 当距离小于等于预设的值时
// 将元素设为 fix 状态
if (!elem.data("_fixed") && distance <= marginTop) {
var offsetLeft = elem.offset().left;
self._addPlaceholder();
elem.css({
if (!this.elem.data("sticked") && distance <= this.marginTop) {
this._addPlaceholder();
this.elem.css({
position: "fixed",
top: marginTop,
left: offsetLeft
top: this.marginTop,
left: this.elem.offset().left
});
elem.data("_fixed", true);
$.isFunction(self.options.callback) && self.options.callback.call(self, true);
} else if (elem.data("_fixed") && distance > marginTop) {
self._restore();
this.elem.data("sticked", true);
this.callback.call(this, true);
} else if (this.elem.data("sticked") && distance > this.marginTop) {
this._restore();
}
};
Fixed.prototype._supportAbsolute = function() {
var self = this, elem = self.elem, originTop = self._originTop, marginTop = self.marginTop;
Sticky.prototype._supportAbsolute = function() {
// 计算元素距离当前窗口上方的距离
var distance = originTop - doc.scrollTop();
var distance = this._originTop - doc.scrollTop();
// 当距离小于等于预设的值时
// 将元素设为 fix 状态
if (distance <= marginTop) {
self._addPlaceholder();
elem.css({
// 将元素设为 fixed 状态
if (distance <= this.marginTop) {
// 状态变化只有一次
if (!this.elem.data("sticked")) {
this._addPlaceholder();
this.elem.data("sticked", true);
this.callback.call(this, true);
}
this.elem.css({
position: "absolute",
top: marginTop + doc.scrollTop()
top: this.marginTop + doc.scrollTop()
});
elem.data("_fixed", true);
$.isFunction(self.options.callback) && self.options.callback.call(self, true);
} else if (elem.data("_fixed") && distance > marginTop) {
self._restore();
} else if (this.elem.data("sticked") && distance > this.marginTop) {
this._restore();
}
};
Fixed.prototype._restore = function(f) {
var self = this, elem = self.elem;
self._removePlaceholder();
Sticky.prototype._supportSticky = function() {
// 直接设置 sticky 的样式属性
var tmp = "";
for (var i = 0; i < stickyPrefix.length; i++) {
tmp += "position:" + stickyPrefix[i] + "sticky;";
}
this.elem[0].style.cssText += tmp + "top: " + this.marginTop + "px;";
// 由于 position:sticky 尚未提供接口判断状态
// 因此仍然要计算 distance 以便进行回调
var distance = this._originTop - doc.scrollTop();
if (!this.elem.data("sticked") && distance <= this.marginTop) {
this.elem.data("sticked", true);
this.callback.call(this, true);
} else if (this.elem.data("sticked") && distance > this.marginTop) {
this.callback.call(this, false);
}
};
Sticky.prototype._restore = function() {
this._removePlaceholder();
// 恢复原有的样式
elem.css(self._originStyles);
elem.data("_fixed", false);
!f && $.isFunction(self.options.callback) && self.options.callback.call(self, false);
this.elem.css(this._originStyles);
// 设置元素状态
this.elem.data("sticked", false);
this.callback.call(this, false);
};
// 需要占位符的情况有: 1) position: static or relative; 但除了:
// 1) !display: block;
Fixed.prototype._addPlaceholder = function() {
var self = this, elem = self.elem;
var need = false, flt = elem.css("float"), position = elem.css("position"), display = elem.css("display");
if (indexOf([ "static", "relative" ], position) !== -1) need = true;
if (display !== "block") need = false;
// 需要占位符的情况有: 1) position: static or relative; 但除了 display 不是 block
Sticky.prototype._addPlaceholder = function() {
var need = false;
if (indexOf([ "static", "relative" ], this.elem.css("position")) !== -1) {
need = true;
}
if (this.elem.css("display") !== "block") {
need = false;
}
if (need) {
// 添加占位符
self._placeholder = $('<div style="visibility: hidden;margin:0;padding:0;"></div>');
self._placeholder.width(elem.outerWidth(true)).height(elem.outerHeight(true)).css("float", flt).insertAfter(elem);
this._placeholder = $('<div style="visibility:hidden;margin:0;padding:0;"></div>');
this._placeholder.width(this.elem.outerWidth(true)).height(this.elem.outerHeight(true)).css("float", this.elem.css("float")).insertAfter(this.elem);
}
};
Fixed.prototype._removePlaceholder = function() {
var self = this;
Sticky.prototype._removePlaceholder = function() {
// 如果后面有占位符的话, 删除掉
self._placeholder && self._placeholder.remove();
};
Fixed.prototype.destory = function() {
var self = this;
self._restore(1);
self.elem.data("bind-fixed", false);
$(window).off("scroll." + self._stickyId);
};
function Sticky(options) {
this.options = options;
this._stickyId = guid++;
}
Sticky.prototype.render = function() {
var self = this, elem = self.elem = $(self.options.element);
// 一个元素只允许绑定一次
if (!elem.length || elem.data("bind-fixed")) return;
// 记录元素原来的位置
self._originTop = elem.offset().top;
self.marginTop = $.isNumeric(self.options.marginTop) ? Math.min(self.options.marginTop, self._originTop) : self._originTop;
self._originStyles = {
position: null,
top: null
};
// 保存原有的样式
for (var style in self._originStyles) {
if (self._originStyles.hasOwnProperty(style)) {
self._originStyles[style] = elem.css(style);
}
}
self._supportSticky();
$(window).on("scroll." + self._stickyId, function() {
if (!elem.is(":visible")) return;
self._supportSticky();
});
elem.data("bind-fixed", true);
return self;
};
Sticky.prototype._supportSticky = function() {
var self = this, elem = self.elem, originTop = self._originTop, marginTop = self.marginTop, tmp = "";
var distance = originTop - doc.scrollTop();
if (!elem.data("_fixed") && distance <= marginTop) {
for (var i = 0; i < stickyPrefix.length; i++) {
tmp += "position:" + stickyPrefix[i] + "sticky;";
}
elem[0].style.cssText += tmp + "top: " + self.marginTop + "px;";
elem.data("_fixed", true);
// 支持 position: sticky 的是不需要占位符的
$.isFunction(self.options.callback) && self.options.callback.call(self, true);
} else if (elem.data("_fixed") && distance > marginTop) {
self._restore();
}
};
Sticky.prototype._restore = function(f) {
var self = this, elem = self.elem;
// 恢复原有的样式
elem.css(self._originStyles);
elem.data("_fixed", false);
!f && $.isFunction(self.options.callback) && self.options.callback.call(self, false);
this._placeholder && this._placeholder.remove();
};
Sticky.prototype.destory = function() {
var self = this;
self._restore(1);
self.elem.data("bind-fixed", false);
$(window).off("scroll." + self._stickyId);
this._restore();
this.elem.data("bind-sticked", false);
$(window).off("scroll." + this._stickyId);
};
function stick(elem, marginTop, callback) {
var actual = stick.isPositionStickySupported ? Sticky : Fixed;
return new actual({
// 接口们
// ---
module.exports = sticky;
function sticky(elem, marginTop, callback) {
return new Sticky({
element: elem,
marginTop: marginTop || 0,
callback: callback
}).render();
}
stick.stick = stick;
stick.fix = function(elem) {
return new Fixed({
element: elem
// sticky.stick(elem, marginTop, callback)
sticky.stick = sticky;
// sticky.fix(elem)
sticky.fix = function(elem) {
return new Sticky({
element: elem,
marginTop: Number.MAX_VALUE
}).render();
};
// 便于写测试用例
sticky.isPositionStickySupported = isPositionStickySupported;
sticky.isPositionFixedSupported = isPositionFixedSupported;
// Helper
// ---
function checkPositionFixedSupported() {
return !isIE6;
}
Expand Down Expand Up @@ -213,8 +208,4 @@ define("arale/sticky/1.2.1/sticky-debug", [ "$-debug" ], function(require, expor
for (var i = 0; i < array.length; i++) if (array[i] === item) return i;
return -1;
}
// 便于写测试用例
stick.isPositionFixedSupported = _isPositionFixedSupported;
stick.isPositionStickySupported = _isPositionStickySupported;
module.exports = stick;
});
Loading

0 comments on commit 18f0b4f

Please sign in to comment.