粘性导航条，视差流，第二个div上的奇怪偏移

Question

我正在尝试为视差滚动创建粘性导航栏/标题部分。向下和向上滚动时，导航/标题成功粘贴到页面顶部。但是，当我单击导航栏上的“主页”选项卡时，粘性导航/标题部分会下拉到第二个包装器div部分。我在这里错过了什么？这是到目前为止http://www.jenniferpurwin.com/ThePartyNewYork/parallax-party.html

页面的链接

使用Javascript：

         $('.scroller').on('click', function(e){
                e.preventDefault();
                var goTo = $(this).attr('data-goto');
                var top = $(goTo).position().top - $('#header_container').height();
                $("html, body").animate({ scrollTop: top },'slow');                    
            });


            var sections    = {},
            i               = 0;

            $('.section').each(function(){
                var sectionName = $(this).attr('id');                    
                sections[sectionName] = {'bottom': $(this).offset().top + $(this).outerHeight(true), 'top':$(this).offset().top - $('#header_container').height()};
            });


            $(window).scroll(function(){
                var $this = $(this),
                pos   = $this.scrollTop();                         
                for(i in sections){   
                    if( pos < sections[i].bottom && sections[i].top <= pos){                            
                        $('#header_container a').removeClass('active');
                        $('#nav_' + i).addClass('active');
                    }  
                }
            });


    $(document).ready(function() {
        var stickyNavTop = $('#header_container').offset().top;
        var stickyNav = function() {
            var scrollTop = $(window).scrollTop();     
            if (scrollTop > stickyNavTop) {     
                $('#header_container').addClass('sticky');
            } else {    
                $('#header_container').removeClass('sticky'); 
                }};
        stickyNav();
        $(window).scroll(function() {   
        stickyNav();
        });
        })