diff --git a/HISTORY.md b/HISTORY.md index c270a86..2c240b8 100644 --- a/HISTORY.md +++ b/HISTORY.md @@ -2,6 +2,10 @@ --- +## 1.2.1 + +`tag:improved` 修改 sticky.stick 的默认 marginTop 为 0, fix [#13](https://github.com/aralejs/sticky/issues/13) + ## 1.2.0 `tag:improved` 优化接口, 去除 event 依赖, 增加 callback 参数. 简化两个 position 判断. [#11](https://github.com/aralejs/sticky/issues/11) diff --git a/dist/sticky-debug.js b/dist/sticky-debug.js index a6e1b81..0b28b6c 100644 --- a/dist/sticky-debug.js +++ b/dist/sticky-debug.js @@ -1,4 +1,4 @@ -define("arale/sticky/1.2.0/sticky-debug", [ "$-debug" ], function(require, exports, module) { +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(); @@ -12,7 +12,6 @@ define("arale/sticky/1.2.0/sticky-debug", [ "$-debug" ], function(require, expor if (!elem.length || elem.data("bind-fixed")) return; // 记录元素原来的位置 self._originTop = elem.offset().top; - self._originLeft = elem.offset().left; self.marginTop = $.isNumeric(self.options.marginTop) ? Math.min(self.options.marginTop, self._originTop) : self._originTop; self._originStyles = { position: null, @@ -49,11 +48,12 @@ define("arale/sticky/1.2.0/sticky-debug", [ "$-debug" ], function(require, expor // 当距离小于等于预设的值时 // 将元素设为 fix 状态 if (!elem.data("_fixed") && distance <= marginTop) { + var offsetLeft = elem.offset().left; self._addPlaceholder(); elem.css({ position: "fixed", top: marginTop, - left: self._originLeft + left: offsetLeft }); elem.data("_fixed", true); $.isFunction(self.options.callback) && self.options.callback.call(self, true); @@ -116,7 +116,7 @@ define("arale/sticky/1.2.0/sticky-debug", [ "$-debug" ], function(require, expor this._stickyId = guid++; } Sticky.prototype.render = function() { - var self = this, elem = self.elem = $(self.options.element), tmp = ""; + var self = this, elem = self.elem = $(self.options.element); // 一个元素只允许绑定一次 if (!elem.length || elem.data("bind-fixed")) return; // 记录元素原来的位置 @@ -132,10 +132,6 @@ define("arale/sticky/1.2.0/sticky-debug", [ "$-debug" ], function(require, expor self._originStyles[style] = elem.css(style); } } - for (var i = 0; i < stickyPrefix.length; i++) { - tmp += "position:" + stickyPrefix[i] + "sticky;"; - } - elem[0].style.cssText += tmp + "top: " + self.marginTop + "px;"; self._supportSticky(); $(window).on("scroll." + self._stickyId, function() { if (!elem.is(":visible")) return; @@ -145,9 +141,13 @@ define("arale/sticky/1.2.0/sticky-debug", [ "$-debug" ], function(require, expor return self; }; Sticky.prototype._supportSticky = function() { - var self = this, elem = self.elem, originTop = self._originTop, marginTop = self.marginTop; + 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); @@ -172,7 +172,7 @@ define("arale/sticky/1.2.0/sticky-debug", [ "$-debug" ], function(require, expor var actual = stick.isPositionStickySupported ? Sticky : Fixed; return new actual({ element: elem, - marginTop: marginTop, + marginTop: marginTop || 0, callback: callback }).render(); } diff --git a/dist/sticky.js b/dist/sticky.js index 8bac6c2..c9419b2 100644 --- a/dist/sticky.js +++ b/dist/sticky.js @@ -1 +1 @@ -define("arale/sticky/1.2.0/sticky",["$"],function(a,b,c){function d(a){this.options=a,this._stickyId=p++}function e(a){this.options=a,this._stickyId=p++}function f(a,b,c){var g=f.isPositionStickySupported?e:d;return new g({element:a,marginTop:b,callback:c}).render()}function g(){return!o}function h(){if(n)return!1;var a=k[0].body;if(k[0].createElement&&a&&a.appendChild&&a.removeChild){var b,c=k[0].createElement("div"),d=function(a){return window.getComputedStyle?window.getComputedStyle(c).getPropertyValue(a):c.currentStyle.getAttribute(a)};a.appendChild(c);for(var e=0;e * html { background:url(null) no-repeat fixed; } ").appendTo("head"),d(),j(window).on("scroll."+a._stickyId,function(){b.is(":visible")&&d()}),b.data("bind-fixed",!0),a}},d.prototype._supportFixed=function(){var a=this,b=a.elem,c=a._originTop,d=a.marginTop,e=c-k.scrollTop();!b.data("_fixed")&&d>=e?(a._addPlaceholder(),b.css({position:"fixed",top:d,left:a._originLeft}),b.data("_fixed",!0),j.isFunction(a.options.callback)&&a.options.callback.call(a,!0)):b.data("_fixed")&&e>d&&a._restore()},d.prototype._supportAbsolute=function(){var a=this,b=a.elem,c=a._originTop,d=a.marginTop,e=c-k.scrollTop();d>=e?(a._addPlaceholder(),b.css({position:"absolute",top:d+k.scrollTop()}),b.data("_fixed",!0),j.isFunction(a.options.callback)&&a.options.callback.call(a,!0)):b.data("_fixed")&&e>d&&a._restore()},d.prototype._restore=function(a){var b=this,c=b.elem;b._removePlaceholder(),c.css(b._originStyles),c.data("_fixed",!1),!a&&j.isFunction(b.options.callback)&&b.options.callback.call(b,!1)},d.prototype._addPlaceholder=function(){var a=this,b=a.elem,c=!1,d=b.css("float"),e=b.css("position"),f=b.css("display");-1!==i(["static","relative"],e)&&(c=!0),"block"!==f&&(c=!1),c&&(a._placeholder=j('
'),a._placeholder.width(b.outerWidth(!0)).height(b.outerHeight(!0)).css("float",d).insertAfter(b))},d.prototype._removePlaceholder=function(){var a=this;a._placeholder&&a._placeholder.remove()},d.prototype.destory=function(){var a=this;a._restore(1),a.elem.data("bind-fixed",!1),j(window).off("scroll."+a._stickyId)},e.prototype.render=function(){var a=this,b=a.elem=j(a.options.element),c="";if(b.length&&!b.data("bind-fixed")){a._originTop=b.offset().top,a.marginTop=j.isNumeric(a.options.marginTop)?Math.min(a.options.marginTop,a._originTop):a._originTop,a._originStyles={position:null,top:null};for(var d in a._originStyles)a._originStyles.hasOwnProperty(d)&&(a._originStyles[d]=b.css(d));for(var e=0;e=e?(b.data("_fixed",!0),j.isFunction(a.options.callback)&&a.options.callback.call(a,!0)):b.data("_fixed")&&e>d&&a._restore()},e.prototype._restore=function(a){var b=this,c=b.elem;c.css(b._originStyles),c.data("_fixed",!1),!a&&j.isFunction(b.options.callback)&&b.options.callback.call(b,!1)},e.prototype.destory=function(){var a=this;a._restore(1),a.elem.data("bind-fixed",!1),j(window).off("scroll."+a._stickyId)},f.stick=f,f.fix=function(a){return new d({element:a}).render()},f.isPositionFixedSupported=r,f.isPositionStickySupported=q,c.exports=f}); +define("arale/sticky/1.2.1/sticky",["$"],function(a,b,c){function d(a){this.options=a,this._stickyId=p++}function e(a){this.options=a,this._stickyId=p++}function f(a,b,c){var g=f.isPositionStickySupported?e:d;return new g({element:a,marginTop:b||0,callback:c}).render()}function g(){return!o}function h(){if(n)return!1;var a=k[0].body;if(k[0].createElement&&a&&a.appendChild&&a.removeChild){var b,c=k[0].createElement("div"),d=function(a){return window.getComputedStyle?window.getComputedStyle(c).getPropertyValue(a):c.currentStyle.getAttribute(a)};a.appendChild(c);for(var e=0;e * html { background:url(null) no-repeat fixed; } ").appendTo("head"),d(),j(window).on("scroll."+a._stickyId,function(){b.is(":visible")&&d()}),b.data("bind-fixed",!0),a}},d.prototype._supportFixed=function(){var a=this,b=a.elem,c=a._originTop,d=a.marginTop,e=c-k.scrollTop();if(!b.data("_fixed")&&d>=e){var f=b.offset().left;a._addPlaceholder(),b.css({position:"fixed",top:d,left:f}),b.data("_fixed",!0),j.isFunction(a.options.callback)&&a.options.callback.call(a,!0)}else b.data("_fixed")&&e>d&&a._restore()},d.prototype._supportAbsolute=function(){var a=this,b=a.elem,c=a._originTop,d=a.marginTop,e=c-k.scrollTop();d>=e?(a._addPlaceholder(),b.css({position:"absolute",top:d+k.scrollTop()}),b.data("_fixed",!0),j.isFunction(a.options.callback)&&a.options.callback.call(a,!0)):b.data("_fixed")&&e>d&&a._restore()},d.prototype._restore=function(a){var b=this,c=b.elem;b._removePlaceholder(),c.css(b._originStyles),c.data("_fixed",!1),!a&&j.isFunction(b.options.callback)&&b.options.callback.call(b,!1)},d.prototype._addPlaceholder=function(){var a=this,b=a.elem,c=!1,d=b.css("float"),e=b.css("position"),f=b.css("display");-1!==i(["static","relative"],e)&&(c=!0),"block"!==f&&(c=!1),c&&(a._placeholder=j('
'),a._placeholder.width(b.outerWidth(!0)).height(b.outerHeight(!0)).css("float",d).insertAfter(b))},d.prototype._removePlaceholder=function(){var a=this;a._placeholder&&a._placeholder.remove()},d.prototype.destory=function(){var a=this;a._restore(1),a.elem.data("bind-fixed",!1),j(window).off("scroll."+a._stickyId)},e.prototype.render=function(){var a=this,b=a.elem=j(a.options.element);if(b.length&&!b.data("bind-fixed")){a._originTop=b.offset().top,a.marginTop=j.isNumeric(a.options.marginTop)?Math.min(a.options.marginTop,a._originTop):a._originTop,a._originStyles={position:null,top:null};for(var c in a._originStyles)a._originStyles.hasOwnProperty(c)&&(a._originStyles[c]=b.css(c));return a._supportSticky(),j(window).on("scroll."+a._stickyId,function(){b.is(":visible")&&a._supportSticky()}),b.data("bind-fixed",!0),a}},e.prototype._supportSticky=function(){var a=this,b=a.elem,c=a._originTop,d=a.marginTop,e="",f=c-k.scrollTop();if(!b.data("_fixed")&&d>=f){for(var g=0;gd&&a._restore()},e.prototype._restore=function(a){var b=this,c=b.elem;c.css(b._originStyles),c.data("_fixed",!1),!a&&j.isFunction(b.options.callback)&&b.options.callback.call(b,!1)},e.prototype.destory=function(){var a=this;a._restore(1),a.elem.data("bind-fixed",!1),j(window).off("scroll."+a._stickyId)},f.stick=f,f.fix=function(a){return new d({element:a}).render()},f.isPositionFixedSupported=r,f.isPositionStickySupported=q,c.exports=f}); diff --git a/examples/index.md b/examples/index.md index a18bea5..8ac20e9 100644 --- a/examples/index.md +++ b/examples/index.md @@ -56,7 +56,7 @@ ````javascript seajs.use(["$", "sticky"], function($, sticky) { // sticky - sticky.stick("#stick", 30, function(status) { + sticky.stick("#stick", 0, function(status) { if (status) { seajs.log("stick"); } else { @@ -65,14 +65,14 @@ seajs.use(["$", "sticky"], function($, sticky) { }); // fixed - $('
回到顶部
').appendTo("body"); - sticky.fix("#gotop"); + //$('
回到顶部
').appendTo("body"); + //sticky.fix("#gotop"); - $('').appendTo("body"); - sticky.fix("#nav"); + //$('').appendTo("body"); + //sticky.fix("#nav"); - $('
footer fixed
').appendTo("body"); - sticky.fix("#bottom"); + //$('
footer fixed
').appendTo("body"); + //sticky.fix("#bottom"); }); ```` diff --git a/package.json b/package.json index 68f86cc..e30cc83 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "family": "arale", "name": "sticky", - "version": "1.2.0", + "version": "1.2.1", "keywords": ["utility"], "description": "实现元素跟随滚动的效果。", "homepage": "http://aralejs.org/sticky/", diff --git a/src/sticky.js b/src/sticky.js index a377271..f2f0e3f 100644 --- a/src/sticky.js +++ b/src/sticky.js @@ -30,7 +30,6 @@ define(function (require, exports, module) { // 记录元素原来的位置 self._originTop = elem.offset().top; - self._originLeft = elem.offset().left; self.marginTop = $.isNumeric(self.options.marginTop) ? Math.min(self.options.marginTop, self._originTop) : self._originTop; @@ -79,12 +78,14 @@ define(function (require, exports, module) { // 当距离小于等于预设的值时 // 将元素设为 fix 状态 if (!elem.data('_fixed') && distance <= marginTop) { + var offsetLeft = elem.offset().left; + self._addPlaceholder(); elem.css({ position: 'fixed', top: marginTop, - left: self._originLeft + left: offsetLeft }); elem.data('_fixed', true); @@ -107,7 +108,6 @@ define(function (require, exports, module) { // 将元素设为 fix 状态 if (distance <= marginTop) { self._addPlaceholder(); - elem.css({ position: 'absolute', top: marginTop + doc.scrollTop() @@ -177,8 +177,7 @@ define(function (require, exports, module) { Sticky.prototype.render = function () { var self = this, - elem = self.elem = $(self.options.element), - tmp = ""; + elem = self.elem = $(self.options.element); // 一个元素只允许绑定一次 if (!elem.length || elem.data('bind-fixed')) return; @@ -199,12 +198,6 @@ define(function (require, exports, module) { } } - for (var i = 0; i < stickyPrefix.length; i++) { - tmp += "position:" + stickyPrefix[i] + "sticky;"; - } - - elem[0].style.cssText += tmp + "top: " + self.marginTop + "px;"; - self._supportSticky(); $(window).on('scroll.'+self._stickyId, function () { @@ -220,11 +213,18 @@ define(function (require, exports, module) { var self = this, elem = self.elem, originTop = self._originTop, - marginTop = self.marginTop; + 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); @@ -258,7 +258,7 @@ define(function (require, exports, module) { return (new actual({ element: elem, - marginTop: marginTop, + marginTop: marginTop || 0, callback: callback })).render(); }