我正在使用多个jQuery脚本。这两个脚本都可以自行运行。但是当它们一起使用时,我得到一个错误$ ..偏移是未定义的..
这是我的JavaScript:
jQuery(document).ready(function() {
$('.sidebar').simpleScrollFollow({
limit_elem: '.limit'
});
});
$(window).scroll(function() {
var hT = $('.stats').offset().top,
hH = $('.stats').outerHeight(),
wH = $(window).height(),
wS = $(this).scrollTop();
console.log((hT - wH), wS);
if (wS > (hT + hH - wH)) {
$('.count').each(function() {
$(this).prop('Counter', 0).animate({
Counter: $(this).text()
}, {
duration: 900,
easing: 'swing',
step: function(now) {
$(this).text(Math.ceil(now));
}
});
}); {
$('.count').removeClass('count').addClass('counted');
};
}
});
这是我正在使用的jQuery脚本:
/**
* @file jQuery Plugin: jquery.simple-scroll-follow
* @version 2.0.3
* @author Yuusaku Miyazaki <toumin.m7@gmail.com>
* @license MIT License
*/
! function(o) {
function t(o, t) {
this.setOption(this, t), this.setFollow(this, o), this._ehScroll(), this._ehResize()
}
o.fn.simpleScrollFollow = function(e) {
var l = [];
return this.each(function() {
l.push(new t(this, e))
}), void 0 != e && void 0 != e.instance && e.instance ? o(l) : this
}, o.extend(t.prototype, {
setEnabled: function(o) {
this.option.enabled = o, this.option.enabled || this.moveDefaultPosition(this)
},
moveDefaultPosition: function(t) {
o(t.follow.elem).css({
position: "",
top: "",
bottom: "",
left: "",
right: ""
}).width("")
},
setFollow: function(t, e) {
var l = {};
l.elem = e, l.width = o(l.elem).width(), l.offset_top = o(l.elem).offset().top, l.offset_bottom = this._calcOffsetBottom(l.elem), l.offset_left = o(l.elem).offset().left, l.position_top = "auto" == o(l.elem).css("top") ? 0 : Number(o(l.elem).css("top").replace(/px$/, "")), t.follow = l
},
setOption: function(t, e) {
t.option = o.extend({
enabled: !0,
limit_elem: o("body"),
min_width: 0
}, e)
},
_calcOffsetBottom: function(t) {
return "window" == t ? o(window).scrollTop() + o(window).height() : o(t).offset().top + o(t).height() + Number(o(t).css("border-top-width").replace(/px$/, "")) + Number(o(t).css("border-bottom-width").replace(/px$/, "")) + Number(o(t).css("padding-top").replace(/px$/, "")) + Number(o(t).css("padding-bottom").replace(/px$/, ""))
},
_ehScroll: function() {
var t = this;
o(window).scroll(function() {
if (!t.option.enabled) return !1;
if (o(window).width() < t.option.min_width) return t.moveDefaultPosition(t), !1;
var e = {
scroll_top: o(this).scrollTop(),
scroll_bottom: o(this).scrollTop() + o(this).height()
},
l = {
offset_top: o(t.follow.elem).offset().top,
offset_bottom: t._calcOffsetBottom(t.follow.elem)
},
f = {
offset_bottom: t._calcOffsetBottom(t.option.limit_elem)
};
return f.offset_bottom - t.follow.offset_top < l.offset_bottom - l.offset_top ? !1 : void(e.scroll_top < t.follow.offset_top ? o(t.follow.elem).css({
position: "absolute",
top: "",
bottom: "",
left: "",
right: ""
}).width(t.follow.width) : e.scroll_top > f.offset_bottom ? o(t.follow.elem).css({
position: "absolute",
top: f.offset_bottom - t.follow.offset_top - (l.offset_bottom - l.offset_top) + t.follow.position_top_num,
bottom: "auto",
left: "",
right: ""
}).width(t.follow.width) : e.scroll_bottom - e.scroll_top > l.offset_bottom - l.offset_top ? f.offset_bottom - e.scroll_top < l.offset_bottom - l.offset_top ? o(t.follow.elem).css({
position: "absolute",
top: f.offset_bottom - t.follow.offset_top - (l.offset_bottom - l.offset_top) + t.follow.position_top,
bottom: "auto",
left: "",
right: ""
}).width(t.follow.width) : o(t.follow.elem).css({
position: "fixed",
top: 0,
bottom: "auto",
left: t.follow.offset_left,
right: "auto"
}).width(t.follow.width) : e.scroll_bottom > f.offset_bottom ? o(t.follow.elem).css({
position: "absolute",
top: f.offset_bottom - t.follow.offset_top - (l.offset_bottom - l.offset_top) + t.follow.position_top,
bottom: "auto",
left: "",
right: ""
}).width(t.follow.width) : e.scroll_bottom - t.follow.offset_top > l.offset_bottom - l.offset_top ? o(t.follow.elem).css({
position: "fixed",
top: "auto",
bottom: 0,
left: t.follow.offset_left,
right: "auto"
}).width(t.follow.width) : o(t.follow.elem).css({
position: "absolute",
top: "",
bottom: "",
left: "",
right: ""
}).width(t.follow.width))
})
},
_ehResize: function() {
this.timer = !1;
var t = this;
o(window).resize(function() {
t.timer !== !1 && clearTimeout(t.timer), t.timer = setTimeout(function() {
t.moveDefaultPosition(t), t.setFollow(t, t.follow.elem), o(window).trigger("scroll")
}, 200)
})
}
})
}(jQuery);
答案 0 :(得分:1)
这是因为您的$('.stats')
元素未定义,因此您无法获得它的偏移顶值。
你必须在将它存入这样的var之前测试它:
if ($('.stats').length > 0){
offsetStats = $('.stats').offset().top;
}
当然,获得outerHeight是相同的原则:
if ($('.stats').length > 0){
outerHeightStats = $('.stats').outerHeight();
}
因此,在您的javascript文件中,它将如下所示:
jQuery(document).ready(function() {
$('.sidebar').simpleScrollFollow({
limit_elem: '.limit'
});
});
$(window).scroll(function() {
// we test .stats here because the rest of the code depends on it.
if($('.stats').length > 0){
var hT = $('.stats').offset().top,
hH = $('.stats').outerHeight(),
wH = $(window).height(),
wS = $(this).scrollTop();
console.log((hT - wH), wS);
if (wS > (hT + hH - wH)) {
$('.count').each(function() {
$(this).prop('Counter', 0).animate({
Counter: $(this).text()
}, {
duration: 900,
easing: 'swing',
step: function(now) {
$(this).text(Math.ceil(now));
}
});
}); {
$('.count').removeClass('count').addClass('counted');
};
}
}
});