2016-03-18 35 views
-1

Birden çok jQuery komut dosyası kullanıyorum. Bu betiklerin ikisi de kendi başlarına iyi çalışır. Birlikte kullanıldığında Ama bir hata $ .. ofset olsun tanımsız ..jQuery komutları birbirinin işlevselliğini üst üste getiriyor

Bu benim JavaScript'tir:

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

Bu kullanıyorum jQuery komut dosyası:

/** 
* @file jQuery Plugin: jquery.simple-scroll-follow 
* @version 2.0.3 
* @author Yuusaku Miyazaki <[email protected]> 
* @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

Lütfen tüm kodunuzu bir JSfiddle'de belirtin, örneğin –

+0

@AlexZahir Sağladığınız URL'ye erişemiyorum: 'İstenen URL /1/inner.html bu sunucuda bulunamadı. '(404 Bulunamadı) – Ralph

cevap

1

Çünkü, $('.stats') öğenizin tanımlanmamış olması nedeniyle, ofset üst değerini alamazsınız.

Sen böyle bir var stoklar önce bunu test etmek zorunda: En javascript dosyasında Yani

if ($('.stats').length > 0){ 
    outerHeightStats = $('.stats').outerHeight(); 
} 

: Elbette

if ($('.stats').length > 0){ 
    offsetStats = $('.stats').offset().top; 
} 

, bu outerHeight almak için aynı ilkedir gibi görünecektir:

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'); 
     }; 
     } 
    } 
    }); 
+0

Tam olarak bildiğimden bunu tam koduma ekleyebilir misiniz? nasıl uygulanır. Üzgünüm, burada bir acemi var. –

+0

Düzenledim. Kodun daha fazla açıklamasına ihtiyacınız var mı? –

+0

Harikasınız. Çok teşekkürler. –

İlgili konular