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

我正在努力学习waypoints.js。问题是my函数直接在页面加载时运行。而不是在我的航路点上。我不知道为什么

我希望有人能告诉我我做错了什么

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_容器距离窗口顶部为50px