jQuery脚本相互重叠 [英] jQuery scripts overlapping each other's functionality
本文介绍了jQuery脚本相互重叠的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在使用多个jQuery脚本.这两个脚本都可以很好地运行.但是当它们一起使用时，我得到一个错误$ .. offset是不确定的..
I am using multiple jQuery scripts. Both of these scripts work well on their own. But when they are used together i get an error $..offset is undefined..
这是我的JavaScript:
This is my 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脚本:
This is the jQuery script I am using:
/**
* @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);
推荐答案
这是因为未定义您的$('.stats')元素，因此您无法获取该元素的偏移最高值.
It's because your $('.stats') element isn't defined, so you can't get the offset top value of it.
您必须先对其进行测试，然后才能将其存储在这样的var中:
You have to test it before stock it in a var like this :
if ($('.stats').length > 0){
offsetStats = $('.stats').offset().top;
}
当然，获得outerHeight的原理相同:
Of course, it is the same principle to get the outerHeight :
if ($('.stats').length > 0){
outerHeightStats = $('.stats').outerHeight();
}
所以在您的javascript文件中，它看起来像这样:
So in your javascript file, it will looks like this :
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');
};
}
}
});
这篇关于jQuery脚本相互重叠的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
