(function(t) {
t.fn.fixtop = function(e) {
var n = t.extend({
// 元素固定时与顶部的距离
marginTop: 0,
// 元素固定时的 z-index 层级
zIndex: 100,
// 元素固定时的宽度
fixedWidth: “100%”,
// 新添加的参数，指定滚动到何位置取消固定元素
unfixScrollPosition: null
}, e),
// 当前元素
o = this,
// 元素距离页面顶部的初始位置
r = this.offset().top – n.marginTop,
// 创建一个占位元素，保持页面布局不变
a = t(“<div/>”).css({
display: o.css(“display”),
width: o.outerWidth(!0),
height: o.outerHeight(!0),
float: o.css(“float”)
});
// 用于标记是否正在处理滚动事件
var scrolling = false;
// 监听窗口滚动事件
return t(window).scroll(function() {
if (!scrolling) {
scrolling = true;
// 使用定时器实现防抖处理
setTimeout(function() {
// 获取元素距离页面顶部的位置
var e = r;
// 如果页面滚动超过了指定位置，并且当前元素没有固定
if (t(window).scrollTop() > e && o.css(“position”) !== “fixed”) {
// 在当前元素后面插入占位元素
o.after(a);
// 固定当前元素
o.css({
position: “fixed”,
top: n.marginTop + “px”,
“z-index”: n.zIndex,
width: n.fixedWidth
});
// 触发固定时的自定义事件
if (typeof n.fixed !== “undefined”) {
n.fixed(o);
}
}
// 如果页面滚动没有超过指定位置，并且当前元素已经固定
if (t(window).scrollTop() < e && o.css(“position”) === “fixed”) {
// 移除占位元素
a.remove();
o.css({
position: “relative”,
top: “0px”,
“z-index”: n.zIndex
});
// 触发取消固定时的自定义事件
if (typeof n.unfixed !== “undefined”) {
n.unfixed(o);
}
}
// 如果页面滚动超过指定位置，取消固定元素的功能
if (n.unfixScrollPosition !== null && t(window).scrollTop() >= n.unfixScrollPosition && o.css(“position”) === “fixed”) {
a.remove();
o.css({
position: “relative”,
top: “0px”,
“z-index”: n.zIndex
});
if (typeof n.unfixed !== “undefined”) n.unfixed(o);
}
scrolling = false;
}, 100);
// 这里设置防抖延迟时间为 100 毫秒
}
}),
this;
}
}) (jQuery);
实战：
当导航.panel-tab滚动超过自身 top时，固定在头部。
var $nav = $(“.panel-tab”);
if ($nav.size()>0) {
$nav.fixtop({
fixed:function(p){
p.addClass(‘fixed’);
},
unfixed:function(p){
p.removeClass(‘fixed’);
}
});
}