1

視差スクロール用のスティッキー ナビゲーション バー/ヘッダー セクションを作成しようとしています。上下にスクロールすると、ナビゲーション/ヘッダーがページの上部に正常に固定されます。ただし、ナビゲーションの [ホーム] タブをクリックすると、粘着性のあるナビゲーション/ヘッダー セクションが secondWrapper 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();
        });
        })
4

0 に答える 0