JSFiddle上的代码不在网站上工作

Question

我一直在寻找/玩一些jquery代码，它们分别在进/出视图时添加/删除css类。我找到了这个，它完全可以从JSFiddle里面完成。

http://jsfiddle.net/z3xTU/417/

function isScrolledIntoView(elem) {
        var docViewTop = $(window).scrollTop();
        var docViewBottom = docViewTop + $(window).height();

        var elemTop = $(elem).offset().top;
        var elemBottom = elemTop + $(elem).height();

        return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
    }

    $(window).scroll(function(){

        if (isScrolledIntoView('.class') === true) {
            $('.class').addClass('in-view');
        }

        else {
         $('.class').removeClass('in-view');
        }

    });

当我将此代码发布到我的html文件时，我在头部包含了jquery库的链接。另外，我在以下代码中添加了JS小提琴中的js代码＆＃34; $（文件）。就绪（函数（

JS小提琴代码

}）;

在我的页面上，向上滚动后，红色框上的课程没有被移除，但它不在视野范围内。

http://bluebean.ca/test.html

关于什么可能出错的任何想法？

非常感谢！