为什么我的航点不起作用？

Question

我正在尝试学习waypoints.js。问题是我的函数直接在页面加载上运行。而不是我的航路点。我无法弄清楚原因。

我会赞美我有谁能告诉我我做错了什么？

JS代码：

 $(document).ready(function() {
                $('.filter_container').waypoint(function(direction) {
                  $('.filter_container').css('position', 'fixed');
                  $('.filter_container').css('top', '50px');
                  $('.filter_container').css('z-index', '5');
                  $('.filter_container').css('width', '100%');
                  $('.filter_container').css('left', '0');
                  $('.filter_container').css('border-radius', '0');
                  $('.filter-header-container').css('display', 'none');
                  $('.filter_container').css('padding', '0');
                  $('.filter_container h2').css('float', 'left');
                  $('.filter_container h2').css('display', 'inline');
                  $('.filter_container').css('height', '50px');
                  $('.filter_container h2').css('margin-top', '-10px');
                  $('.filter-form').css('margin-top', '0');
                }, {
                    offset:'50px'});
                });

所有的jQuery代码都是在页面加载时运行而不是whten .filter_container是从窗口顶部开始的50px。