jQuery脚本重叠彼此的功能

时间:2016-03-18 17:24:34

标签: javascript jquery

我正在使用多个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);

1 个答案:

答案 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');
        };
      }
    }
  });