jQuery Parallax Navigation scrollt nicht zum Ziel

Question

Ich habe eine Parallax Scroll-Demo zusammengestellt, aber ich habe Probleme, zwischen den Inhalten zu navigieren.

• Header und Footer befestigt sind und der ganze Rest nicht.

• Auf die Variablen section3Topsection4Top Ich vermute, Höhe wird nicht richtig berechnet.

Ich kann das Problem nicht sehen.

Bitte schauen Sie sich meine Demo an und versuchen Sie, durch das Menü zu klicken. Es sollte funktionieren, indem Sie auf das Menü klicken, auf Scrollen und Größenänderung.

Demo: http://fiddle.jshell.net/Zza7t/

JS:

function redrawDotNav(){ 
    var section1Top = 0; 
    var section2Top = $('#BuyKeep').offset().top - (($('#Rentals').offset().top - $('#BuyKeep').offset().top)/2); 
    var section3Top = $('#Rentals').offset().top - (($('#WaystoWatch').offset().top - $('#Rentals').offset().top)/2); 
    var section4Top = $('#WaystoWatch').offset().top - (($(document).height() - $('#WaystoWatch').offset().top)/2); 

    $('nav#primary a').removeClass('active'); 

    if($(document).scrollTop() >= section1Top && $(document).scrollTop() < section2Top){ 
     $('nav#primary a.about').addClass('active'); 
    } else if ($(document).scrollTop() >= section2Top && $(document).scrollTop() < section3Top){ 
     $('nav#primary a.BuyKeep').addClass('active'); 
    } else if ($(document).scrollTop() >= section3Top && $(document).scrollTop() < section4Top){ 
     $('nav#primary a.Rentals').addClass('active'); 
    } else if ($(document).scrollTop() >= section4Top){ 
     $('nav#primary a.WaystoWatch').addClass('active'); 
    } 
} 

function scrollFooter(scrollY, heightFooter) { 

    if(scrollY >= heightFooter) { 
     $('#WaystoWatch').css({ 
      'bottom' : '0px' 
     }); 
    } 
    else { 
     $('#WaystoWatch').css({ 
      'bottom' : '-' + heightFooter + 'px' 
     }); 
    } 
} 

    function heightsCalculator(){ 
     var windowHeight = $(window).height(), 
     footerHeight = $('#WaystoWatch').height(), 
     heightDocument = (windowHeight) + ($('#BuyKeep').height()) + ($('#Rentals').height()) + ($('#WaystoWatch').height()) - 0; 

     $('#scroll-animate, #scroll-animate-main').css({ 
      'height' : heightDocument + 'px' 
     }); 
     $('#about').css({ 
      'height' : windowHeight + 'px' 
     }); 
     $('.wrapper-parallax').css({ 
      'margin-top' : windowHeight + 'px' 
     }); 

     scrollFooter(window.scrollY, footerHeight); 

     window.onscroll = function(){ 
     var scroll = window.scrollY; 

     $('#scroll-animate-main').css({ 
      'top' : '-' + scroll + 'px' 
     }); 

     $('#about').css({ 
      'background-position-y' : 50 - (scroll * 100/heightDocument) + '%' 
     }); 

     scrollFooter(scroll, footerHeight); 

     } 
    } 

Answer 1

Die einzige Verbindung, die für mich nicht funktioniert ist der „Fußzeile“ .. Da haben Sie es Position fixiert, es ändern wird seine Offset während Sie die Seite nach oben und unten scrollen. Sie möchten das gleiche tun, was Sie mit Ihrem Header getan haben, und einen bestimmten Ort auf der Seite scrollen, in diesem Fall den unteren. Es gibt auch etwas, das deine "Fußzeilenhöhe" verändert, und ich bin nicht in der Lage herauszufinden, wo du das machst oder warum, aber ich gehe davon aus, dass es nicht notwendig ist.

$('a.WaystoWatch').click(function(){ 
    $('html, body').animate({ 
     scrollTop:$('body').height() 
    }, 1000, function() { 
     parallaxScroll(); 
    }); 
    return false; 
}); 

JSFIDDLE HERE