Q:

Add a class to the sections once they are visible in viewport

This is how I am trying but the condition would never fire..
$(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);
                }
            });
});

Fiddle: http://jsfiddle.net/rYeMC/
Any idea whyat i'm doing wrong? 

A:

In addition to the typo, you have a slight math error.  The easiest way I've found to determine if an element is onscreen is to determine the top and bottom of the viewport and compare that with the top and bottom of the element:
$(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();
});

Working fiddle: http://jsfiddle.net/rYeMC/2/

