Jquery przewijanie z czystym paralaksy css nie działa

Question

Próbuję pracować ze słynnym samouczkiem Keitha Clarka dla czystych stron paralaksy css (http://blog.keithclark.co.uk/pure-css-parallax-websites/).

Jak dotąd, tak dobrze. Problem pojawia się, gdy chcę połączyć go z navbar z płynnym przewijaniem jQuery.

Problem występuje, gdy strona jest już przewinięta. Zasadniczo, od góry przewija się dokładnie do miejsca, które chcę przewinąć, ale jeśli strona jest na produktach lub kontaktach, przewija się do dziwnych miejsc.

Próbowałem do tego kilku różnych fragmentów, ale wygląda na to, że po prostu nie chce działać!

HTML

Nawigacja:

<ul class="nav navbar-nav navbar-right"> 
    <li><a href="#group2">Home</a></li> 
    <li><a href="#group3">About</a></li> 
    <li><a href="#group5">Products</a></li> 
    <li><a href="#group7">Contact</a></li> 
</ul> 

ciała:

<div class="parallax"> 
    <div id="group2" class="parallax__group"> 
     <div class="parallax__layer parallax__layer--back"> 
      <div class="title">START</div> 
     </div> 
    </div> 
    <div id="group3" class="parallax__group"> 
     <div class="parallax__layer parallax__layer--base"> 
      <div class="title">ABOUT</div> 
     </div> 
    </div> 
    <div id="group4" class="parallax__group"> 
     <div class="parallax__layer parallax__layer--deep"> 
      <div class="title">RANDOM PICTURE</div> 
     </div> 
    </div> 
    <div id="group5" class="parallax__group"> 
     <div class="parallax__layer parallax__layer--base"> 
      <div class="title">PRODUCTS</div> 
     </div> 
    </div> 
    <div id="group6" class="parallax__group"> 
     <div class="parallax__layer parallax__layer--back"> 
      <div class="title">RANDOM PICTURE</div> 
     </div> 
    </div> 
    <div id="group7" class="parallax__group"> 
     <div class="parallax__layer parallax__layer--base"> 
      <div class="title">CONTACT</div> 
     </div> 
    </div> 
</div> 

Jquery:

$(function() { 
    $('a[href*=#]:not([href=#])').click(function() { 
     if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) { 
      var target = $(this.hash); 
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']'); 
      if (target.length) { 
       $('.parallax').animate({ 
        scrollTop: target.offset().top 
       }, 2500); 
       return false; 
      } 
     } 
    }); 
}); 

To najbardziej odpowiednie części kodu - odpoczywać można znaleźć na jsfiddle ... http://jsfiddle.net/mgLzejad/1/

sprawdzić kod i zobaczyć czy można znaleźć błąd - nie mogę ....

Answer 1

To jsfiddle: http://jsfiddle.net/mgLzejad/2/

target.offset().top jest względną wartość według ile jest $('.parallax') przewijane. Aby naprawić wartość scrollTop, dodaj bieżącą wartość przewijania z $('.parallax')

scrollTop: $(target).offset().top + $('.parallax').scrollTop()