類添加到一旦他們在視口中

可見這是我正在嘗試，但條件永遠不會觸發部分..類添加到一旦他們在視口中

$(window).scroll(function(e){ 
      var scrollTop = $(window).scrollTop(); 
      var viewportHeight = $(window).height(); 
      $('section').each(function(){ 
       var top = $(this).offset().top; 
       var bottom = top + $(this).height(); 
       if(top <= scrollTop && bottom >= (scrollTop + vieportHeight)){ 
        $(this).addClass('visible'); 
        console.log('Hola'); 
       }else{ 
        console.log(top,bottom,scrollTop,viewportHeight); 
       } 
      }); 
});

小提琴：http://jsfiddle.net/rYeMC/

任何想法whyat我做錯誤？

來源

2013-06-12 Toni Michel Caubet

http://remysharp.com/2009/01/26/element-in-view-event-plugin/一個很好的插件，它正在做你想做的事！ – supersize

這裏有一個錯字和你的jsfiddle：vieportHeight –

除了錯字，你有輕微的數學錯誤。我發現最簡單的方法來確定一個元素是屏幕上是確定視口的頂部和底部，並比較與元素的頂部和底部：

$(document).ready(function() { 
    var viewport = $(window), 
     setVisible = function (e) { 
      var viewportTop = viewport.scrollTop(), 
       viewportBottom = viewport.scrollTop() + viewport.height(); 
      $('section').each(function() { 
       var self = $(this), 
        top = self.offset().top, 
        bottom = top + self.height(), 
        topOnScreen = top >= viewportTop && top <= viewportBottom, 
        bottomOnScreen = bottom >= viewportTop && bottom <= viewportBottom, 
        elemVisible = topOnScreen || bottomOnScreen; 
       self.toggleClass('visible', elemVisible); 
      }); 
     }; 
    viewport.scroll(setVisible); 
    setVisible(); 
});

工作小提琴：http://jsfiddle.net/rYeMC/2/

來源

2013-06-12 23:49:01 pete

嘿！我回來了這個功能，我試圖做一個自定義選擇器，使這個功能mor可重用，http://jsfiddle.net/toniweb/GHE52/3/，任何想法，爲什麼它失敗？謝謝！！！ –

在你的「inViewPort」處理程序中，傳入的參數「obj」是一個DOM元素，而不是一個jQuery對象，所以像'offset'和'height'這樣的jQuery方法將不起作用。要解決這個問題，請將您的參數包裝在一個jQuery對象中，或使用元素屬性而不是jQuery方法。 http://jsfiddle.net/GHE52/4/ – pete

你是一個拯救生命的人！非常感謝:) –

看起來你想要什麼：

http://jsfiddle.net/rYeMC/1/

$(function() { 
    $(window).scroll(function (e) { 
     var scrollTop = $(window).scrollTop(); 
     var viewportHeight = $(window).height(); 
     $('section').each(function() { 
      var top = $(this).offset().top; 
      var bottom = top + $(this).height(); 
      if (top <= scrollTop && bottom >= (scrollTop + viewportHeight)) { 
       $(this).addClass('visible'); 
      } else { 
       console.log(top, bottom, scrollTop, viewportHeight); 
       $(this).removeClass('visible'); 
      } 
     }); 
    }); 
});

來源

2013-06-12 10:15:46

一切都很好與您的代碼。只是糾正錯字（vieport），並注意style屬性否決了你的外部CSS！

來源

2013-06-12 10:23:50 yardarrat

這是條件

if(scrollTop + viewportHeight >= top){ 
    $(this).addClass('visible'); 
}

來源

2013-06-12 10:37:37

類添加到一旦他們在視口中

回答

相關問題